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

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

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.

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 was due to my bad usage of tailwind config. I wasn’t using the “extend” property, so It overwrote the whole base config

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.

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?

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

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 😍

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)?