tailwindcss
tailwindcss copied to clipboard
tailwindlabs
Introduce `:user-valid` & `:user-invalid` variants
See
- https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid
- https://developer.mozilla.org/en-US/docs/Web/CSS/:user-invalid
Just landed in Chrome, Firefox & Safari:
- https://caniuse.com/mdn-css_selectors_user-valid
- https://caniuse.com/mdn-css_selectors_user-invalid
It looks like the pseudo elements are not yet added to https://github.com/cssnano/cssnano/blob/master/packages/postcss-merge-rules/src/lib/ensureCompatibility.js, because they are part of the Selectors Level 4 spec. Should I unmerge the rules in the test for now or should we wait for this feature to land until support is added in postcss-merge-rules?
Hey!
You might have noticed that I forced pushed to this branch. The reason is because the PR now uses next as the base branch which is our working branch for Tailwind CSS v4. In other words, the feature you implemented here is now written in the new codebase.
The code is ported as-is, so no API changes of your feature happened while moving it to the new codebase.
I also made sure to add you as a co-author because you still deserve all the credit 💪
Hi @RobinMalfait! Is it possible to have it in v3, or it will only be available in v4?
Hi @RobinMalfait! Is it possible to have it in v3, or it will only be available in v4?
Yes, you can use arbitrary properties: [&:user-invalid]:
