# 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.


![Figure 1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1631703963775/taD2lf8dy.png)

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.

<iframe src="https://codesandbox.io/embed/switch-component-with-tailwind-react-sbyxg?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="Switch Component with tailwind + React"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>


If you liked my content consider following me on twitter.
<a href="https://twitter.com/theysaymaurya?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @theysaymaurya</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>