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.
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>
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>
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;
}
The final result should look like this:
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>
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 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.
Top comments (9)
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.
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.
you can get used to taking off your pants over your head, but why?
Tailwind is losing popularity? Did I miss something? What's popular then?
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
Unpopular opinion about Tailwind, with examples: medium.com/codex/more-tailwind-to-...
Article is not mine, so don't start arguing with me.
Nice ...
Every time i see all those clases from tailwind scares me and its difficult to read the code..
Thanks for sharing