adding variants to tailwind.config.ts doesn't update

[sedagulkesen]

Hello Tailwind team,

I am using Tailwind v2.0.3. I am trying to customize the background colour of the checkbox element once it is in checked status.

By following the documentation here , first I added checked variants to tailwind.config.js file as following:

  variants: {
    extend: {
      backgroundColor: ['checked'],
      borderColor: ['checked'],
    }
  };

After the changes on tailwind.config.ts, I am running yarn build.
Then, I have added the checked: prefix to the element like this:

        <input
          id={name}
          name={name}
          type="checkbox"
          className="Checkbox__input checked:bg-red checked:border-transparent"
        />
        <label htmlFor={name} className="CheckboxElement__label text-lm-text dark:text-dm-white">
          {label}
        </label>
      </div>

The checked class doesn't seem to be applied, it still shows the background-color as the default colour.

[simonswiss]

Hey!

These will only take place if you also add the appearance-none utility, which means you then need to implement your own "check" tick and other styles...

I think you can actually achieve what you want to do here much more easily with the Tailwind CSS forms plugin.

Here's a Tailwind Play that shows how you can style the color of the checkbox with text- color utilities, as well as setting a matching focus ring:

https://play.tailwindcss.com/WGi7NYNLfk

Fun timing because we're working on making this plugin more visible in the documentation - I am actually working on a video to explain this plugin right now 😅