I don't know that there's a huge difference for most sites. If you're using tailwind classes in markup, you have to include everything on one line and use the hover:* and focus:* classes.
But if you're using Tailwind classes in CSS files, I think either way makes sense. You could even combine selectors using your latter example:
Maybe I wasn’t clear enough: I’m looking specifically at bringing Tailwind classes into my components’ CSS files. And my question is whether I should be using Tailwind’s variants (.el { @apply hover:bg-green; }) OR stick with CSS native pseudo classes (.el:hover { @apply bg-green; })?
Nope you were clear, I'm saying that I don't think it matters which way you do it. The CSS that Tailwind outputs for its variants is pretty much the same as when you would be outputting by using regular classes inside a :hover {} selector.
Tailwind is nice in that it gives you 2 or 3 ways to do things.
I don't know that there's a huge difference for most sites. If you're using tailwind classes in markup, you have to include everything on one line and use the
hover:*andfocus:*classes.But if you're using Tailwind classes in CSS files, I think either way makes sense. You could even combine selectors using your latter example:
Instead of writing three classes for
hover:bg-green,focus:bg-green, andactive:bg-green.Maybe I wasn’t clear enough: I’m looking specifically at bringing Tailwind classes into my components’ CSS files. And my question is whether I should be using Tailwind’s variants (
.el { @apply hover:bg-green; }) OR stick with CSS native pseudo classes (.el:hover { @apply bg-green; })?Nope you were clear, I'm saying that I don't think it matters which way you do it. The CSS that Tailwind outputs for its variants is pretty much the same as when you would be outputting by using regular classes inside a
:hover {}selector.Tailwind is nice in that it gives you 2 or 3 ways to do things.
Oh sorry then, maybe I misunderstood your comment initially :)
Anyway - I'm just curious which of these "2 or 3 ways" is more efficient and performant (and IF there is any difference).
Hum, am I missing something? CSS does not support nested selector, so you need to do
.class:focus, .class:hover... { @apply... }
Right?
Oh, I forgot to mention I use SCSS as preprocessor - but that shouldn’t change anything👍