DEV Community

Cover image for Building a Tailwind CSS toggle/switch component
Zoltán Szőgyényi for Themesberg

Posted on • Originally published at flowbite.com

Building a Tailwind CSS toggle/switch component

I've been using Tailwind CSS a lot lately and although I love the new way of working with utility classes, I have to say that I miss having a base set of components to work with similar to Bootstrap or Bulma.

That is why I started a new series here on the DEV community on how to build commonly used web components using the utility classes from Tailwind CSS.

Tailwind CSS toggle

Last time I showed you how to build a file upload component and today I want to show you how you can build a toggle/switch element.

Tailwind CSS toggle/switch component

The first step towards building the toggle component is to set up the basic HTML code:

<label for="toggle-example">
  <input type="checkbox" id="toggle-example">
  <div></div>
  <span>Toggle me</span>
</label>
Enter fullscreen mode Exit fullscreen mode

As you can see we wrapped all of the elements inside a label tag so that wherever you click it will toggle the checkbox. We also added an empty div tag which will later be used the background.

Let's now add the utility classes that are needed to styles the element:

<label for="toggle-example" class="flex items-center cursor-pointer relative mb-4">
  <input type="checkbox" id="toggle-example" class="sr-only">
  <div class="toggle-bg bg-gray-200 border-2 border-gray-200 h-6 w-11 rounded-full"></div>
  <span class="ml-3 text-gray-900 text-sm font-medium">Toggle me</span>
</label>
Enter fullscreen mode Exit fullscreen mode

The toggle element is not complete yet, because we need to add a few pseudo classes which will be the dot that will move from left to right.

The easiest way to make it work is to install the Flowbite package from NPM and include it as a plugin in your Tailwind CSS project. Then this and other components from Flowbite will work.

Alternatively, you can also just add the following styles inside your CSS:

.toggle-bg:after {
    content: '';
    @apply absolute top-0.5 left-0.5 bg-white border border-gray-300 rounded-full h-5 w-5 transition shadow-sm;
}

input:checked + .toggle-bg:after {
    transform: translateX(100%);
    @apply border-white;
}

input:checked + .toggle-bg {
    @apply bg-blue-600 border-blue-600;
}
Enter fullscreen mode Exit fullscreen mode

The final result should look like this:

Tailwind CSS toggle

You can also make the toggle component checked by default:

<label for="toggle-example-checked" class="flex items-center cursor-pointer relative">
  <input type="checkbox" id="toggle-example-checked" class="sr-only" checked>
  <div class="toggle-bg bg-gray-200 border-2 border-gray-200 h-6 w-11 rounded-full"></div>
  <span class="ml-3 text-gray-900 text-sm font-medium">Toggle me (checked)</span>
</label>
Enter fullscreen mode Exit fullscreen mode

I hope that this tutorial helped you with your Tailwind CSS journey and expand the components that you can work with. Before you go, I would like to show you a Tailwind CSS component library that this toggle component is part of and which you can use to build websites even faster.

Flowbite - Tailwind CSS component library

As I've said earlier, this Tailwind CSS toggle component is part of a larger open source component library called Flowbite.

Flowbite - Tailwind CSS components

Flowbite is basically a set of UI components like buttons, alerts, badges, dropdowns, navbars built with the utility classes from Tailwind CSS but also includes interactive elements like tooltips and datepickers that can help you build websites even faster with Tailwind CSS.

You can quickly get started by installing Flowbite via NPM and then require it as a plugin inside your Tailwind CSS project or just use the CDN to try it out.

Discussion (9)

Collapse
jt3k profile image
Andrey Gurtovoy

my opinion: this is an article that could help popularize tailwind. because tailwind itself is rapidly losing its popularity. not surprising since this is a reinvention of atomic-css which has already proven everything.

Collapse
dgonzalezr profile image
Dabiel González Ramos • Edited on

I would say it all depends on how used to we are. If you think about it, when you have a “normal” CSS methodology, what you would do to understand the styles applied? You look for the class name in the CSS rules declaration and then look at all the rules there, right? Well, the difference with TW is that you read the styles applied in the markup instead, since every single class has only one specific purpose, as each CSS rule would have on the other way around.

Collapse
jt3k profile image
Andrey Gurtovoy

you can get used to taking off your pants over your head, but why?

Collapse
shaglock profile image
Ilya Shaplyko

Tailwind is losing popularity? Did I miss something? What's popular then?

Collapse
jt3k profile image
Andrey Gurtovoy

try to search on Google for the word CSS.here he is popular. for styling I prefer it. because I know him perfectly, unlike the authors tailwind or for example styled-components. you can say knowledge css this is my main job. and I strongly recommend that you do not waste time on tailwind, but take a closer look at something more useful, for example css-modules

Collapse
siy profile image
Sergiy Yevtushenko

Unpopular opinion about Tailwind, with examples: medium.com/codex/more-tailwind-to-...

Article is not mine, so don't start arguing with me.

Collapse
sm0ke profile image
Sm0ke

Nice ...

Collapse
alanxtreme profile image
Alan Daniel • Edited on

Every time i see all those clases from tailwind scares me and its difficult to read the code..

Collapse
uithemes profile image
ui-themes

Thanks for sharing