Reduce file by using the group selector

[joseDaKing]

@adamwathan

Link to the group selector for further information .

If not mistaken when tailwind generates the CSS code grouping selector is not used thereby there will be duplicated style decelerations.

How tailwind compiles the CSS code.

.bg-white {...}
.group:hover .group-hover\:bg-white {...}
.focus-within\:bg-white:focus-within {...}
.hover\:bg-white:hover {...}
.focus\:bg-white:focus {...}

The style decelerations are repeated although they are the same.

How tailwind should compile the CSS code.

.bg-white, 
.group:hover .group-hover\:bg-white,
.focus-within\:bg-white:focus-within,
.hover\:bg-white:hover,
.focus\:bg-white:focus
 {...}

Here the style decelerations are shared across the different selectors. But there would still be duplications for screen variants, like small screens, large screens, and etc. I think this would drastically reduce the size, and allow more variants for all properties.

[adamwathan]

Hey thanks for the suggestion! Unfortunately it's not as simple as this, because doing this would break this for example:

<div class="bg-white hover:bg-black focus:bg-blue-300">

We have to make sure all the hover classes are grouped together, all the focus classes are grouped together, etc. etc. otherwise rules that are meant to override others might not actually override properly, since they might appear earlier in the CSS.

Here, hover:bg-blue-500 will take precedence over focus:bg-black, even though our intention in the framework is for focus variants to always take precedence over hover variants:

.bg-white, 
.group:hover .group-hover\:bg-white,
.focus-within\:bg-white:focus-within,
.hover\:bg-white:hover,
.focus\:bg-white:focus
 {...}
 
 .bg-black, 
.group:hover .group-hover\:bg-black,
.focus-within\:bg-black:focus-within,
.hover\:bg-black:hover,
.focus\:bg-black:focus
 {...}
 
 .bg-blue-500, 
.group:hover .group-hover\:bg-blue-500,
.focus-within\:bg-blue-500:focus-within,
.hover\:bg-blue-500:hover,
.focus\:bg-blue-500:focus
 {...}

So in general we just have to be very careful with the actual CSS declaration order, and because of that there are not as many opportunities to collapse things unfortunately.