@apply rule cannot pick up grouped utility css selector

[zh3ngyuan]

What version of Tailwind CSS are you using?

2.2.19

What build tool (or framework if it abstracts the build tool) are you using?

postcss-cli 8.3.1

What version of Node.js are you using?

v16.13.2

What browser are you using?

Chrome

What operating system are you using?

MacOS

Reproduction URL

https://gist.github.com/ALexander4295502/6fef8dfb343bc94a970700715460d172

Describe your issue

I am using a grouped css selector in my utility colors.css file as shown in the gist above (grouped selectors are html.dark .dark\:v-dark-bg-backdrop-modal and .v-dark-bg-backdrop-modal)

/* colors.css */
@layer utilities {
	@variants focus, hover, active, visited {
		/* purgecss start ignore */

		html.dark .dark\:v-dark-bg-backdrop-modal,
		.v-dark-bg-backdrop-modal {
			background-color: rgba(70, 71, 101, 0.8);
		}
		/* purgecss end ignore */
	}
}

And in one of my component css file, I am applying one of the grouped selectors to my component

@import './colors.css';

html.dark my-modal {
	@apply v-dark-bg-backdrop-modal;
}

And after running postcss cli command the html.dark my-modal is disappeared in the output CSS file, but if I separate the grouped selectos as separate selectors as below:

html.dark .dark\:v-dark-bg-backdrop-modal {
			background-color: rgba(70, 71, 101, 0.8);
		}

		.v-dark-bg-backdrop-modal {
			background-color: rgba(70, 71, 101, 0.8);
		}

There won't be any issues. As I didn't find any note in https://tailwindcss.com/docs/functions-and-directives#apply saying that @apply cannot be used for grouped selector, hence I think this is a bug needs to be fixed.

[igbominadeveloper]

I just upgraded our version of tailwind to V3 and now compilation fails because of group classes with @apply

[zh3ngyuan]

Hi wondering if someone can take a look at this issue?

[zh3ngyuan]

I just upgraded our version of tailwind to V3 and now compilation fails because of group classes with @apply

Does that mean the grouped class selector is not supported to be used in the tailwind css? I didn't find a documentation mentioning that.

[thecrypticace]

Hey! Thanks for the report! The rule with @apply v-dark-bg-backdrop-modal not being output at all was likely a bug in Tailwind CSS v2. In Tailwind CSS v3 @apply has gotten smarter but we also detect this situation as a circular dependency and throw an error. After some discussion we decided that this isn't ideal and we should consider the two selectors html.dark .dark\:v-dark-bg-backdrop-modal and .v-dark-bg-backdrop-modal separately for the purposes of @apply even though they're on the same rule. I've opened #8222 to address this but I'm gonna get a review on it before I merge it just to be sure I'm not missing anything.

---

Regarding the issue you pointed out about group & @apply this one is a bit of a doozy but if you're up for a long-ish explanation about some of the reason why we don't / can't support them:

Neither group nor peer are supported by @apply because they're not "real" utilities that exist on their own. They're classes used by the selectors produced by group-*: and peer-*: variants.

For example, the utility class group-hover:bg-orange-100 generates the following CSS:

.group:hover .group-hover\:bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity))
}

This is because we want to be able to add group to any parent element and target that specific child element when the "group" is hovered. However, if you could @apply the group class it means we'd have to know every "group" class in your project and use that list to generate a complete list of selectors for the group-hover variants like so:

.group:hover .group-hover\:bg-orange-100,
.item-add:hover .group-hover\:bg-orange-100,
.item-remove:hover .group-hover\:bg-orange-100,
.item-edit:hover .group-hover\:bg-orange-100,
.even-more-selectors-here:hover .group-hover\:bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity))
}

And, since we can't know how your HTML is structured, we have to generate all of them. As such it's likely not feasible for projects that split styles across multiple files — for example in Vue SFCs — since every use of @apply could affect the generated CSS which would result in a significant slow down.

This could also significantly increase the size of the CSS because this would be necessary for every group-* variant that's used in your project. For some rough back-of-the-napkin math let's say that:

1. You have 10 classes which are have @apply group in your project.
2. Your project uses these 3 group variants: group-hover, group-focus, and group-active
3. You use 5 utilities for each of these to control text color, background color, border color, font weight, and transition duration.

By default there would be 3 * 5 = 15 selectors generated, one for each utility + group variant pair. If we allowed .group to be aliased like this it would generate 10 * 3 * 5 = 150 additional selectors, 10 per utility + group variant pair, for a total of 165 selectors. This could result in around 6–8 KB of added CSS just for the selectors.

This is definitely a long winded explanation but hopefully that helps explain some of the reasons why group and peer aren't supported. If you have any further questions about this set up please feel free to ask!