[idea] auto-inferred variants based on standard pseudo classes

[kctdfh]

There are some nice plugins out there for non existent interaction variants such as group-hover-within but it'd be great for JIT to support every standard pseudo class as variant.

Things like required, optional, and read-only are very useful for designing form elements but currently require a plugin.

Would be nice to at least have a subset of these standard pseudo classes be recognized as variants by JIT so that we can simply write required:ring-red-600 and have it just work.

[adamwathan]

Yeah I think this would be good to add — one thing that would help us do it faster is if someone wants to provide a full list of what's missing, and think through the order they should be listed in to have the most intuitive override behavior.

For example, should required:border-red-500 override focus:border-red-500 if a required element is focused?

[kctdfh]

Great! I'd be open to creating a draft for this by the end of the week. The community can then refine it based on their experience using the pseudo classes. Should I start a discussion thread when it's ready or is an issue better suited? Or should I just post it on this thread?

[adamwathan]

Let's keep it to this thread or in a PR if you wanted to take it that far 👍🏻

[Triloworld]

Yeah I think this would be good to add — one thing that would help us do it faster is if someone wants to provide a full list of what's missing, and think through the order they should be listed in to have the most intuitive override behavior.

For example, should required:border-red-500 override focus:border-red-500 if a required element is focused?

Maybe there is simple method to organize pseudo-classes in more natural way. I will call it as "context related" and "user focus" to align with browser.

Website:

1. Static (before:border-red-500)
2. Dynamic state (client:before:border-red-600, theme:before:border-red-500, before:border-red-500)
   User:
3. Website one time change state because of user action (open:loading:before:border-red-600 required:before:border-red-500)
4. User see loader or something visible in time after doing action (loading:before:border-red-800 open:before:border-red-700 required:before:border-red-600 before:border-red-500)
5. User action right in time and one place focused (focus:border-red-900 ...)

This need to be investigate and write to some documentation when JIT can introduce all sort of pseudo thinks

[adamwathan]

PR'd and merged this stuff earlier this week 👍🏻

#4482