I am looking for a good shorthand to apply the same effect to multiple pseudo classes in tailwind.

For example, I may want to apply a blue background to both :hover and :focus states on a div.

Currently I'd have to write the following:

<div className="hover:bg-blue focus:bg-blue>Text<div>

OR, i could use apply to build out a custom class like this:

.hover-focus-bg-blue {
  @apply hover:bg-blue focus:bg-blue
}

But neither of these are great options when i have to apply complex states (in my current project I need to cover 11 states on one element (rest/hover/active/focus/focus-visible/focus-visible && hover etc).

The apply method only saves code if there are multiple uses of it.

What I would like to see is something like:

<div className="[hover, focus]:bg-blue">Text</div>

Does anyone know of some syntax like that? Can't find it anywhere.

CodePudding user response：

This is a question that is asked frequently. Mostly it's about grouping classes into one grouped syntax (for example, hover:(bg-red-500 border-2).

This is the answer I received after searching for a solution to this question. In short, this functionality doesn't exist for now. Even though this answer refers to the grouping of utilities into one selector, the same logic should apply to the grouping of pseudo-selectors:

The Tailwind maintainers did look at this feature at one point but ultimately decided to put it on hold for now. See this Twitter thread: https://twitter.com/adamwathan/status/1461519820411789314

So, as you can see from the answer and the Twitter feed, it's currently on hold. In the Twitter thread, the developers were testing this feature regarding performance, and it looks like this feature, at its current state duplicates CSS compared to using individual utilities:

So we did a test where we converted every single Tailwind UI template (over 500 files) to use the grouped syntax to see how much bandwidth grouping would save you when serving HTML.

This makes sense when you think about it, because using the grouped syntax (like focus:(font-bold,underline)) leads to fewer repeated symbols in the document, because there are now more unique class names.

Using the non-grouped syntax, every instance of focus:font-bold can be compressed out and replaced with a short placeholder (say %). Using grouped syntax, focus:font-bold and focus:(font-bold,underline) can't be compressed out, because they are no longer the same. Plot twist: After compression, the files are actually bigger, not smaller!

Bottom line:

So the takeaway here is that although the grouped syntax looks like less code when you're authoring it, it actually creates both a bigger CSS file and a bigger HTML file in production, making it a very black and white performance anti-pattern.

It's nicer to write though, and the performance cost isn't a huge one, so still a chance we develop it further just for the developer experience for the people who like it. But admittedly hesitant to encourage anything that's bad for performance.