Group pseudo-selections, e.g. lg:(style-one style-two)

[haydenlinder]

Hey there.

Wondering if it's possible to add a feature that allows writing this

<div class='style-one lg:(style-two style-three)'>Some content</div>

to be equivalent to this

<div class='style-one lg:style-two lg:style-three'>Some content</div>

It would save some keystrokes and be easier to read.

Let me know if there's anything I can do to help.

Thanks!

[fredgig]

This is a suggestion that keeps coming up and rightfully so.

[PositiveUser]

Something like

lg:(style-1&style-2&style-3)
OR
lg:(style-1;style-2;style-3)

Spaces in class attribute's value will create new classes

[PositiveUser]

lg:(style-1 style-2 style-3)

⬇️

• lg:(style-1
• style-2
• style-3)

[adamwathan]

We prototyped this to test the performance a little while ago.

Because every unique combination of utilities is a new class, this means tons of duplicate CSS compared to using individual utilities:

We tested it on the Tailwind UI codebase (probably biggest Tailwind codebase on earth) and our tests show that always using grouping doubles the CSS bundle even after compression:

It means less content in your HTML though right, since the classes are shorter. So we benchmarked the file size of each HTML file as well:

The surprising thing here was that even though the HTML files are smaller before compression, they are actually bigger after compression than just using ungrouped utilities.

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.

So overall even though this feature may be a DX improvement, it's a big performance anti-pattern so we are a little hesitant to include it. It makes all of your files larger and your site slower.

[lukewarlow]

I personally believe the best solution to this problem is a third party plugin for your particular build system for handling this in a compile step before Tailwind picks it up. That provides the DX benefits without the downsides noted above.

[papsavas]

Can CSS Nesting solve any of these problems?

[MrOxMasTer]

or example, you can use lg:{flex p-10} or lg:[flex p-10]. Why, for example, when compiling, just do not divide by lg:flex and lg:p-10.
In fact, as I see it, the only problem with tailwind is adaptive or others like hover, because it's inconvenient to prescribe it. Estimate if you will have:
min-[320px]:text-center and you need to prescribe for each. Yes, you can take it out somewhere, but damn. The very essence is that because of tailwind, classes are already huge, and prescribing md to everyone: it's just a waste of time and symbols.

damn, well, it can be thought out somehow. Why, for example, md:flex md:p-10 does not prescribe 2 media requests? Probably because it is somehow implemented under the hood. I think there are a lot of ideas to come up with here and I would really like this feature to be added and then tailwind would have no equal