Switch Component with React + Tailwind CSS

Tailwind CSS is one of the best CSS frameworks out there and working with utility classes I just amazing for quick projects. But there is a whole down part to this is you have to create your own component from scratch.

So here I am teaching you how to make a switch in Tailwind CSS with React.

Let's Create a switch Component in React using Tailwind CSS.

Our boiler plate will look something like this for our switch component.

function Switch() {

  return (
 //   Switch Container
    <div className=" " >

      {/* Switch */}
      <div className = " " > </div>
    </div>
  );

export default Switch;

Once the boiler plate is created all we need to add some Tailwind classes to it.

let's first design out switch container with md:w-14 md:h-7 w-12 h-6 flex items-center bg-gray-300 rounded-full p-1 cursor-pointer as you can see I added some breakpoints so that the whole component is responsive.

Once we are done now we will style our switch-circle component with bg-white md:w-6 md:h-6 h-5 w-5 rounded-full shadow-md.

Now our component will look something like figure 1.

Till now our component will look something like below.

import { useState } from 'react';

function Switch() {

  return (
    //   Switch Container
    <div
      className="md:w-14 md:h-7 w-12 h-6 flex items-center bg-gray-300 rounded-full p-1 cursor-pointer"
    >
      {/* Switch */}
      <div
        className =  "bg-white md:w-6 md:h-6 h-5 w-5 rounded-full shadow-md"
      ></div>
    </div>
  );
}

export default Switch;

Now come's the fun part of Adding functionality.

Adding functionality

Now let's add a state in our component so that we can switch between on and off.

const [toggle , setToggle ] = useState(true)

now let's add transform classes in our switch-circle div

      {/* Switch */}
      <div
        className =  "bg-white md:w-6 md:h-6 h-5 w-5 rounded-full shadow-md transform"
      ></div>

now, what we want is when a user clicks on the switch the switch-circle move to the left or in CSS terms translate-x. For that what we gonna do is add tailwind CSS classes translate-x-6 to the switch-circle div every time when the toggle is false.

Adding Dynamic classes in React.

For adding dynamic CSS is all we need to do is add a string with some variable in className. let's see an example.

// Dynamic classes example.
<div className = { " your class" + someState variable} >
</div>

Now let's implement the above concept in our switch-circle div.

Let's add a variable toggleClass to our component.

  const toggleClass = ' transform translate-x-6';

   {/* Switch */}
      <div
        className =  {"bg-white md:w-6 md:h-6 h-5 w-5 rounded-full shadow-md transform" + toggleClass}
      ></div>

the above code will solve our problem of moving the switch-circle but the problem will be we haven't added any logic where the change will happen on click.

And also we have to add the toggleClass only when the toogle state is false.

For this, we will use the ternary operator and React's synthetic event called the onClick function.

  const [toggle, setToggle] = useState(true);

  const toggleClass = ' transform translate-x-5';

 <div
      className="md:w-14 md:h-7 w-12 h-6 flex items-center bg-gray-300 rounded-full p-1 cursor-pointer"
      onClick={() => {
        setToggle(!toggle);
      }}
    >

   {/* Switch */}
      <div
        className =  {"bg-white md:w-6 md:h-6 h-5 w-5 rounded-full shadow-md 
         transform" +  (toggle ? null : toggleClass)}
      >
</div>

</div>

Now the above switch will be working properly the only thing which is missing is some animation. All we need to do is add more tailwind CSS animation classes duration-300 ease-in-out to our switch-circle component. So that we have a smooth switch between two-state.

Now the whole component is created and you can use it in your project just by Importing them to your parent component.

Here is a sandbox implementation of the above code, try it out.

If you liked my content consider following me on twitter. Follow @theysaymaurya