Fix: “Cannot apply unknown utility class” in Tailwind CSS v4

Error: Cannot apply unknown utility class `border-border`

Error: Cannot apply unknown utility class `font-bold`. Are you using
CSS modules or similar and missing `@reference`?

The fix

First look at which class the error names. That tells you which of two causes you have.

The class is a custom name like border-border, bg-background or text-foreground (common with shadcn/ui). Tailwind v4 only knows colours declared in @theme. Map your CSS variable into it:

@import "tailwindcss";

:root {
  --border: oklch(0.92 0 0);
}

@theme inline {
  --color-border: var(--border);
}

@layer base {
  * {
    @apply border-border;
  }
}

The class is a normal one like font-bold, and the file is a CSS module, a Vue or Svelte <style> block, or any CSS file that doesn’t import Tailwind. Add @reference at the top of that file:

@reference "tailwindcss";

.title {
  @apply font-bold text-xl;
}

If your main CSS defines its own theme, reference that file instead, for example @reference "../app.css";. That way your custom colours work inside the module too.

Why it happens

In v4, @apply can only use utilities that Tailwind knows about in that file.

• Case 1: border-border isn’t a built-in class. It only exists once a --color-border theme variable is defined. Setups copied from Tailwind v3 defined these colours in tailwind.config.js, and v4 ignores that file unless you add @config.
• Case 2: Tailwind processes each CSS module and component style block on its own. Those files never ran @import "tailwindcss", so even font-bold is unknown there. Tailwind v4’s own message now suggests @reference for exactly this case.

Why @reference and not @import

@import "tailwindcss" inside the module also makes the error go away, but it copies Tailwind’s base styles into every module that does it:

@reference lets the file use Tailwind’s theme without outputting it.

What didn’t work