[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 !

[bigyanse]

I was using underscoretw(_tw) with custom tailwind config and had this error. It was due to bad tailwind config.

You need to move everything that you want to extend inside extend property. Placing it outside overrides all the defaults and hence the error. I was using fontSize property outside extend so, it replaced default tailwind text-3xl causing the error. If you move your config fields inside extend, it will solve the error.

Reference: 1091338461

[MrShnaider]

I faced the same problem. The link to the @apply documentation solved my problem. However, according to the comments, it seems that tailwindcss used to allow @apply to be applied inside components without problems. Of course, I would like to return the original behavior

[adancabanas]

In my case I already had a webpack config before bundling my files, I just installed tailwind, postcss and autoprefixer, before calling postCss() on mix ( mix.postCss('css/input.css', 'css/output.css') ) I configured webpack.config.js ProvidePlugin properties, adding postcss plugins tailwindcss and autoprefixer, like this:

const webpack = require('webpack');

module.exports = {
    ...
    plugins: [
        new webpack.ProvidePlugin({
            ...
            tailwindcss: {},
            autoprefixer: {},
        }),
    ],
    ...
};

And in my webpack.mix.js configured mix in this manner:

const mix = require('laravel-mix');
const webpackConfig = require('./webpack.config');

mix
    .webpackConfig(webpackConfig)
    .options({
        ...
    })
    ...
;

ALSO... , all of this using laravel mix bundling bootstrap, quite cumbersome to use both Tailwind and bootstrap but the project requires fast response to changes so no more configuration done due to deadline

BTW... Even tough all of this configuration I ran into the same error from time to time, but it was because of a missing explicit declaration of a directive in tailwind.config.js like e.g text-white, solved by adding into config file like;

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./sites/index.html",
    ],
    theme: {
        colors: {
            transparent: 'transparent',
            white: '#FFFFFF',
        },
    },
    plugins: [],
}

[zaadevofc]

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

i have been solve by removing classes that contain responsive or state prefixes in css. i have no idea why but worked for me

[DonAyers]

Leaving this comment in case it helps anyone. I was getting this error with all of the text-wrap classes when using with @apply and css modules. The fix for my setup (webpack build / yarn workspace monorepo) was to update postcss-importer.

[miljkovic5]

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',
    ...
],
...

It doesn't work for me. I'm using https://frontends.shopware.com/ and I removed UnoCSS and installed NextUI and it doesn't work..