Tailwindcss: feature request: Checked variant

[AdrienLemaire]

I couldn't find a related github issue. The default radio buttons are poorly styled, and setting appearance-none nukes the checked/unchecked style.

from This SO thread, I see we can use a pseudo :checked for this styling

Could we have a checked: variant allowing to give radio input a custom style when checked?

 <input class="appearance-none outline-none w-8 h-8 bg-gray-400 border-4 border-gray-400
              rounded-full checked:bg-white" />

Other variants like active or focus do not serve the same purpose. In a form, we want to keep showing what radio input in a list of inputs has been checked after answering the following questions.

right now, I need to add the supplementary css style to my file to get the functionality working

 <input class="appearance-none outline-none w-8 h-8 bg-gray-400 border-4 border-gray-400
               rounded-full" />

<style>
input[type=radio]:checked {
    background-color: white;
}
</style>

[hacknug]

The default radio buttons are poorly styled, and setting appearance-none nukes the checked/unchecked style.

Have you checked the custom-forms plugin?

[AdrienLemaire]

Hi @hacknug, and thanks for the information. I have a quick look, and I'm not yet sure why I should add another dependency for a single usecase, nor why you chose to go with a new class convention instead of a pseudo-selector class.
I'm not convinced, but I'm sure you've got good reasons and it must be explained somewhere.

If I got it correctly, for the example above, I would need to set class="form-radio text-white" instead of class="checked:bg-white".

Thank you for the share!
I'll leave it to tailwind maintainers to close this feature request if they believe the custom-forms plugin fits better with tailwind's philosophy.

[GeoffSelby]

If you really need the checked variant, you can add custom variants fairly easily. Check the docs https://tailwindcss.com/docs/plugins/#adding-variants.

I do see the benefits of a checked variant though. It might be worth a discussion.

[adamwathan]

Would accept a PR for this but wouldn't enable it for anything by default.

[GeoffSelby]

On it.

[rezyaev]

I see that checked variant has been added, but I haven't found the way you enable it. Can somebody help with that?

[adamwathan]

It's on master but hasn't been released in a proper version yet.

[rezyaev]

@adamwathan ok, I see. Thanks 😄

[raduab]

I see the documentation for the checked variant at https://tailwindcss.com/docs/pseudo-class-variants/#checked-v1-5-0.

When I'm following the instructions, I get the error:

Your config mentions the "checked" variant, but "checked" doesn't appear to be a variant. Did you forget or misconfigure a plugin that supplies that variant?

The documentation says it is available from version 1.5.0+. I'm using the latest tailwind version, which is 1.6.2 ATM

[GeoffSelby]

@raduab can you share your config file and the code where you are trying to use it?

[raduab]

tailwind.config.js:

const { colors } = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      colors: {
        brown: {
          light: '#3D3838',
          dark: '#211A13',
        },
        gray: {
          ...colors.gray,
          light: '#EDECE6',
          dark: 'D9D6CE',
        },
        primary: '#017F8C',
      },
      opacity: {
        '95': '0.95',
      },
      screens: {
        xxl: '1500px',
      },
      spacing: {
        '1/2': '0.15rem',
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
      inset: {
        '1/2': '50%',
      },
      maxWidth: { '7xl': '80rem' },
      minWidth: { '72': '18rem' },
    },
  },
  variants: {
    backgroundColor: ['responsive', 'hover', 'focus', 'checked'],
  },
  plugins: [],
}

And this is the code:

<input
  type="checkbox"
  bind:checked="{yes}"
  class="w-5 h-5 bg-white border border-gray-400 rounded-none focus:outline-none appearance-none checked:bg-primary checked:border-transparent"
/>

The error triggers even if I don't use the 'checked' variant in my code...

[GeoffSelby]

@raduab you need to add the checked variant for your border as well. Anything you want to use the variant on needs to be registered.

EDIT: Can you confirm in your node_modules that tailwindcss is on 1.6.2? You may need to delete node_modules and run npm install again.

[raduab]

Problem solved! Thanks a bunch!

(I had previously the 1.4 version installed)

[GeoffSelby]

Good to hear.

@adamwathan now that the feature has been released, I think this issue can be closed.