tailwindcss icon indicating copy to clipboard operation
tailwindcss copied to clipboard

Collect user-defined CSS that can be used in `@apply`

Open RobinMalfait opened this issue 1 year ago • 1 comments

This allows you to apply user-defined CSS inside of @apply. It works a tiny bit different compared to v3 because we only allow you to apply simple selectors. Only a single class can be applied such as a .foo {}.

If you want more complex selectors, then you can use nesting to enhance the definition of what .foo means exactly.

Implementing it this way allows us to keep the codebase simple and keep expectations simple.

In v3 you can do crazy things such as:

.foo .bar .baz {
  color: red;
}

And you can apply @apply foo or @apply bar or @apply baz, but that's not intuitive if you look at the final result.

This PR also ensures that you can't apply classes that would result in circular dependencies.

What this PR is not:

This PR does not make custom classes "utilities" or "components". This means that you won't be able to do this:

.foo {
  color: red;
}

.example {
  @apply hover:foo;
  /*     ----- You will not be able to add variant modifiers to `.foo` */
}

Fixes: #13342

RobinMalfait avatar Mar 25 '24 12:03 RobinMalfait

Good day, this amazing/magical feature seems to be forgotten, hopefully 🙏 this gets included in the next release, please @adamwathan

nam-co avatar Jun 05 '24 13:06 nam-co