How to create custom checkboxes in TailwindCSS

First, let's create a generic checkbox. The code looks like this:

<div class="flex items-center">
    <input type="checkbox" id="basic" checked class="w-6 h-6 bg-green-200 border-green-800 rounded-lg" />
    <label
        for="basic"
        class="pl-2 text-slate-400"
    >
        Basic HTML checkbox
    </label>
</div>

This results in:

As you can see, the browser took the size into account, but it couldn't handle the colors.

To get a custom checkbox, we need to use some tricks. Since we cannot customize the original checkbox, it is best to remove it. We'll take advantage of the basic HTML functionality that, for checkboxes, clicking on the associated label will also change the status of the input. In addition, we use the :before pseudo-element to create a custom box before the label. The :before element will change its appearance depending on the status of your checkbox. 

First, we create the basic skeleton. To do this, use a container div element with the checkbox input and a label inside it. It looks like this:

<div class="flex items-center">
    <input type="checkbox" />
    <label>
        Custom checkbox
    </label>
</div>

Then hide the box and set the id and for attributes accordingly:

<div class="flex items-center">
    <input type="checkbox" class="hidden" id="custom" />
    <label for="custom">
        Basic HTML checkbox
    </label>
</div> 

To change the style of the :before tag's content, we need to know whether the input is checked in. For this, we use a special Tailwind utility, peer and peer-checked .

We will place three types of classes on the element. The plain utility classes affect the style of the label text. The before:* classes change the appearance of the "square" of the displayed checkbox when it is unchecked. And peer-checked:* classes change the style when checked.
It is important to add the peer utility class to the input element for proper operation.

<input type="checkbox" class="hidden peer" id="custom" />

The final code looks like this:

<div class="flex items-center">
    <input type="checkbox" class="hidden peer" id="custom" checked />
    <label
        for="custom"
        class="relative flex h-6 cursor-pointer pl-8 select-none text-slate-400 
        before:absolute before:left-0 before:flex before:h-6 before:w-6 
        before:items-center before:justify-center before:rounded-lg before:rounded-tr-none before:border 
        before:border-green-800 before:bg-white before:transition-[background-color] 
        before:duration-300 before:ease-in before:content-[''] 
        peer-checked:before:bg-green-200 peer-checked:before:text-green-800 
        peer-checked:before:content-['X'] peer-checked:before:font-bold 
        peer-checked:before:transition-[background-color] peer-checked:before:duration-300 peer-checked:before:ease-in"
    >
        Custom checkbox
    </label>
</div>

And the result is:

TailwindCSS styling based on sibling