Tailwind should throw an error when trying to @apply group

[andrewtannernumiko]

I'm flagging a potential addition to documentation as my team have discovered our production builds are growing considerably when using @apply group.

For example:

.button--primary {
  @apply group;
  @apply ...
}

and then another similar .button--secondary also using @apply group is resulting in a very large production file at ~1.8MB. All production settings such as PurgeCSS and minification were being respected so no problem there. Having removed @apply group (and just adding it directly to the component in the HTML) means our builds are now coming out at ~166KB - so a massive improvement!

So I am wondering if this is something worth flagging specifically in the documentation around the group-hover and group-focus variants, that usage of @apply group will inflate builds? The documentation does mention filesize considerations so this might already be deemed sufficient. Equally I might have just overlooked something. Any guidance appreciated - thanks.

[adamwathan]

Hey! Yeah you definitely do not want to apply group as it won't do what you think it will. It makes sense when you think hard about it though, check this for more information:

#2848 (comment)

I think the best move here is probably to build in an explicit error for this in Tailwind so the build fails. I'll move this to the Tailwind repo 👍🏻

[andrewtannernumiko]

Hello! Yeah it makes total sense and was the reason I didn't flag as a bug. Thanks for sharing the link to the other issue. I will have a read 👍 Solution sounds good.

[christhofer]

I noticed that this also applies for @apply peer;.
Might as well throw an error for that too.