Utility classes can't be built with @apply and custom props

[RedRiderX]

What version of Tailwind CSS are you using?

v3.0.0

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

PostCSS

What version of Node.js are you using?

v14.13.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

https://play.tailwindcss.com/qm3e5FDSEr

Describe your issue

I've made utility classes that have both Tailwind tokens and custom css. But these classes could no longer be used with @apply after upgrading to v3.

This seems to be a regression from v2->v3.

I can mitigate the issue for now by duplicating some classes, but that's not a great solution.

[JoseGarciaM]

same for me =(

[reinink]

Hey! So we're going to dig into this a little deeper, but as a workaround you can wrap these classes in an @layer utilities directive to get this working:

@layer utilities {
  .a {
    @apply b;
  }

  .b {
    @apply uppercase;
    color: red;
  }
}

Here's an updated Play illustrating this: https://play.tailwindcss.com/ksUrE9fW01?file=css

[Tony2]

Hi, I have a lot of custom css classes that I reuse via @apply my-css-class. Recently I upgraded to v3 and things stopped working. I'd like to ask if there is any workaround apart from putting those classes into an @layer utilities as above? Since I took for granted that I can reuse those classes with @apply, they are over all places and it's not easy to find them all.

[garymathews]

@Tony2 with 3.0.7 you don't need to use @layer, but each css that uses @apply will need to include a reference to @tailwind. I have a PR that resolves this to 2.X.X behaviour #6580

[Tony2]

thank you @garymathews for the hint!

I rely heavily on twcss for my work (an in-house component framework). This bug made me somewhat worried if my bet on twcss is the correct decision. Till v2 it has appeared rock-solid and very well-maintained. I understand that v3 is still relatively new, however being able to use @apply my-class is IMO a vital feature to keep css maintainable.

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This should be fixed in #6938, and will be available in the next release (probably later today).

You can already try it by using the insiders build npm install tailwindcss@insiders or yarn add tailwindcss@insiders.