Support the :where pseudo-class

[topherfangio]

Most browsers now support the :where() pseudo-class which allows you to reduce the specificity of an added class allowing other classes to take precedence.

https://developer.mozilla.org/en-US/docs/Web/CSS/:where

When building custom Tailwind components, this allows us to add some default classes to our components that can be easily overridden by users' custom classes without resorting to the !important variant that Tailwind provides.

I'm currently doing this by defining a custom selector in my code, but this looks messy and makes the code a bit less readable.

#some_element{ class: "[:where(&)]:text-lg [:where(&)]:text-red-400" }

If it was fully supported, my code would look much cleaner:

#some_element{ class: "where:text-lg where:text-red-400" }

Tailwind already supports most of the other modifiers out of the box, and although we can easily add this through a custom variant / plugin, it seems like it would be useful to have in the base library.

Would love to know if there was a particular reason that it was left out or if it causes trouble when added!

Thank you! I really love using Tailwind ❤️

[topherfangio]

P.S. I'm happy to take a crack at a PR to support this if you don't see any problems adding the requested functionality.

[topherfangio]

For anyone else coming across this, I wound up adding a custom variant to my application.css

/* Setup custom variant to reduce selector specificity for component defaults */
@custom-variant where (:where(&));