-
Notifications
You must be signed in to change notification settings - Fork 4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feature request: Checked variant #1255
Comments
Have you checked the |
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. If I got it correctly, for the example above, I would need to set Thank you for the share! |
If you really need the I do see the benefits of a |
Would accept a PR for this but wouldn't enable it for anything by default. |
On it. |
This adds a `checked` variant per tailwindlabs#1255 to allow styling of checked elements like checkboxes and radios. It is not enabled for anything by default.
I see that checked variant has been added, but I haven't found the way you enable it. Can somebody help with that? |
It's on master but hasn't been released in a proper version yet. |
@adamwathan ok, I see. Thanks 😄 |
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:
The documentation says it is available from version 1.5.0+. I'm using the latest tailwind version, which is 1.6.2 ATM |
@raduab can you share your config file and the code where you are trying to use it? |
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... |
@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. |
Problem solved! Thanks a bunch! (I had previously the 1.4 version installed) |
Good to hear. @adamwathan now that the feature has been released, I think this issue can be closed. |
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 stylingCould we have a
checked:
variant allowing to give radio input a custom style when checked?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
The text was updated successfully, but these errors were encountered: