Getting "Cannot apply unknown utility class" in the main CSS file when trying to use standard, not custom utilities

Question

The issue can occur when using the Vite plugin, the PostCSS plugin, or even the CLI.

If I import TailwindCSS into my main CSS file (./src/index.css) and then try to use the @apply directive with any standard utility class, I get an error message.

@import url("tailwindcss");

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }

  div {
    scrollbar-color: var(--color-neutral-400) transparent;
  }

  body {
    margin: 0;
    display: flex;
    flex-direction: column;

    @apply bg-slate-50; /* Cannot apply unknown utility class `bg-slate-50`. */
    /* And at this point, the build fails as a critical error. */

    @apply text-neutral-700;
  }

  a {
    @apply text-purple-900 hover:text-purple-700 hover:underline;
  }

  button {
    cursor: pointer;
  }
}

And at this point, along with the error message, I also get an automatic suggestion saying that the @reference directive is required when using it outside of the main CSS file (e.g., in CSS modules). But I don't think that's the solution in this case.

[plugin:@tailwindcss/vite:generate:serve] Cannot apply unknown utility class bg-slate-50. Are you using CSS modules or similar and missing @reference? https://tailwindcss.com/docs/functions-and-directives#reference-directive <path_to>/src/index.css

Related: Stop using @apply - Moni

rozsazoltan
– rozsazoltan

2025-09-17 12:56:10 +00:00
Commented Sep 17 at 12:56 — rozsazoltan
– rozsazoltan, Commented Sep 17 at 12:56

rozsazoltan · Accepted Answer · 2025-08-05 08:43:10Z

0

The issue is caused by the way TailwindCSS is imported. Although it's valid CSS syntax, it's not recommended when using TailwindCSS v4.

@import formal syntax - MDN Docs

The TailwindCSS engine detects that in this case, you're not using TailwindCSS directly in ./src/index.css main CSS file, but rather treating it as an external module. Therefore, it requires the use of @reference.

Instead, you should import TailwindCSS like this - without using url():

Removed @tailwind directives;
_use @import "tailwindcss"; from v4 - TailwindCSS v4 Docs

@import "tailwindcss"; /* instead of @import url("tailwindcss"); */

@layer base {
  body {
    @apply bg-slate-50; /* Working successfully */
  }
}

Collectives™ on Stack Overflow

Getting "Cannot apply unknown utility class" in the main CSS file when trying to use standard, not custom utilities

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related