[Utility class] class doesn't exist. If `[Utility class]` is a custom class, make sure it is defined within a `@layer` directive.

[Rolanddoda]

I have created a StackBlitz reproduction of the issue.

Describe the bug:

I had TailwindCSS version ^3.0.5 and wanted to upgrade to ^3.0.13. After upgrade, I saw a couple of errors in my console.
Specifically, Tailwind is not able to recognize @layer utilities with @apply anymore.

Steps to reproduce:

1. Open the minimal reproduction
2. See in HelloWorld.vue that I have @apply my-custom-class
3. Then open src/css/tailwind.css and see that my-custom-class is defined under @layer utilities
4. Run the app and Observe the error

[adamwathan]

Hey! See docs: https://tailwindcss.com/docs/functions-and-directives#using-apply-with-per-component-css

[Rolanddoda]

Hey Adam!

In the docs it says:

when you try to @apply card in Card.svelte it fails, because Tailwind has no idea that the card class exists

In 3.0.5 though, Tailwind had the idea that this class exists! So the behavior was purposely changed in later versions.

Also says:

Honestly though the best solution is to just not do weird stuff like this at all.

I honestly don't understand why what I am doing is weird:

I am creating utility classes for fonts so I don't have to repeat classes for (font-size, font-weight etc) all over again. Plus, those fonts are specified as they are below from the designer in the style guide.

@layer utilities {
  .h1 { @include DMSans($size: 35px, $line-height: 42px, $font-weight: 700, $letter-spacing: -0.02em); }
  .h2 { @include DMSans($size: 30px, $line-height: 38px, $font-weight: 700, $letter-spacing: -0.02em); }
  .h3 { @include DMSans($size: 22px, $line-height: 32px, $font-weight: 700, $letter-spacing: -0.02em); }
  .h4 { @include DMSans($size: 18px, $line-height: 26px, $font-weight: 700, $letter-spacing: -0.02em); }
  .h5 { @include DMSans($size: 14px, $line-height: 20px, $font-weight: 700, $letter-spacing: -0.02em); }
  .h6 { @include DMSans($size: 12px, $line-height: 18px, $font-weight: 700, $letter-spacing: -0.02em); }
 //...
}

And I am creating those under @layer utilities because:

1. I want those classes to have higher specificity because I am using a CSS Component Library and some font classes might clush
2. I want to take advantage of Tailwind’s modifier syntax for handling things like hover states, responsive breakpoints, dark mode, and more

The reason why I am using @apply instead of just using the HTML markup, is because I don't have access to that.
The element I am targeting is inside the Component Framework:

  :deep(.q-tab__label) {
    @apply h4 t-text-dust;
  }

So personally I think, you have to bring back the ability to allow @layer utilities to get accessed by @apply.

[nemanjam]

I also have broken classes from @layer utilities in @apply after upgrading from "tailwindcss": "^3.0.8" to "tailwindcss": "^3.0.15".

Why is such big breaking change introduced in such minor patch? Or is it a bug?

The `link-primary` class does not exist. If `link-primary` is a custom class, make sure it is defined within a `@layer` directive.

[Areskul]

Same probleme here... let's downgrade :(

[JamieGarcia123]

deleted my comment- it was user error. no issue

[Areskul]

it was due to my bad usage of tailwind config. I wasn't using the "extend" property, so It overwrote the whole base config

[LobodaAndreyEK]

Have the same issue when tried to set colors in tailwind config as css variables.
Seems that things like text-primary-700/30 does not work with css vars

[leonhma]

Just in case someone comes across this issue while using tailwind with @nuxt/ui and @nuxtjs/color-mode: Try moving @nuxt/ui above @nuxtjs/tailwindcss and @nuxtjs/color-mode. This solved the issue for me.

nuxt.config.ts

...
modules: [
    '@nuxt/ui',
    '@nuxtjs/tailwindcss',
    '@nuxtjs/color-mode',
    ...
],
...

[StefanFlaschko]

sing the "extend" property, so It overwrote the whole b

I honestly don't understand why what I am doing is weird:

I also don't understand what is weird about using @apply. What is the alternative? Putting the tailwind class on every element?

[JeremieV]

I also don't understand what is weird about using @apply. What is the alternative? Putting the tailwind class on every element?

I think this sentence in the docs could be rephrased. The alternatives are to either declare your class globally in a layer, or to write a plugin.

I don't think they suggest that there is anything weird about using @apply, but the tailwind maintainers expect you to declare your classes globally. It's a limitation of the tool that you can't use @apply in component-scoped styles, not a weird intent from the developer.

[cn-2k]

Just in case someone comes across this issue while using tailwind with @nuxt/ui and @nuxtjs/color-mode: Try moving @nuxt/ui above @nuxtjs/tailwindcss and @nuxtjs/color-mode. This solved the issue for me.

nuxt.config.ts

...
modules: [
    '@nuxt/ui',
    '@nuxtjs/tailwindcss',
    '@nuxtjs/color-mode',
    ...
],
...

This worked for me, but... WHY? hahahaha
There's a way to make nuxt/ui load first than the others by default after installing (without need to put him manually)?

[phamquocbuu]

Just in case someone comes across this issue while using tailwind with @nuxt/ui and @nuxtjs/color-mode: Try moving @nuxt/ui above @nuxtjs/tailwindcss and @nuxtjs/color-mode. This solved the issue for me.

nuxt.config.ts

...
modules: [
    '@nuxt/ui',
    '@nuxtjs/tailwindcss',
    '@nuxtjs/color-mode',
    ...
],
...

This worked for me 😍

[TonnyMusembi]

'@nuxt/ui',
'@nuxtjs/tailwindcss',
'@nuxtjs/color-mode',

this worked for me !