Cannot apply unknown utility class border-border in Tailwind v4

The fix

@import "tailwindcss";

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

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

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

@reference "tailwindcss";

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

.overlay {
  @apply bg-black/50 text-white/50;
}

In a Vue or Svelte component

In a Vite project the error names the component’s style block, which tells you it’s cause 2:

[plugin @tailwindcss/vite:generate:build] .../src/App.vue?vue&type=style&index=0&scoped=e1d6a330&lang.css
Error: Cannot apply unknown utility class `font-bold`. Are you using CSS modules or similar and missing `@reference`?

The @reference path is resolved from the component file, not from the project root. With App.vue and main.css both in src/, @reference "../main.css" failed with a second error:

Error: Can't resolve '../main.css' in '...\src'

Still using tailwind.config.js colours?

If your border, background and similar colours live in an old tailwind.config.js, you don’t have to move them into @theme today. Load the config from your CSS:

@import "tailwindcss";
@config "./tailwind.config.js";

Which v3 class names still work

Not every renamed utility breaks @apply. On Tailwind 4.3.3, the opacity utilities failed and these old names still worked:

Why it happens

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

• 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

How this was tested

Tailwind 4.3.3 on Windows 11 Pro with Node 24.14.0: each case built with @tailwindcss/cli, then the component case in a Vite 8.3.5 project with Vue 3 and @tailwindcss/vite. First tested September 22, re-tested and extended on October 31, 2026. Error messages are copied from the runs. The script and the output are public.