CSS Error1 Fix Available

Tailwind v4 Error: Invalid @theme directive

Error: Invalid @theme directive. CSS-first engine failed to parse theme registry at line [X].

What does this error mean?

Tailwind v4 replaces the JavaScript configuration with a CSS-first @theme block. If the syntax inside this block is malformed (e.g., using JS object notation instead of CSS variable notation), the build will fail.

Common Causes

Pasting old tailwind.config.js JS objects into a CSS file
Missing semicolons in the @theme block
Incorrectly nested CSS variables

How to Fix It (1 Solution)

Use Proper CSS Variable Syntax

All theme overrides in v4 must use standard CSS variable definitions.

Code

@theme {
  --font-serif: "Merriweather", serif;
  --color-sky-500: #0ea5e9;
}

Related Errors

CSS

Tailwind v4 Build Error: JIT Compilation Failure

View fix

CSS

CSS styles not applying — specificity issue

View fix

CSS

CSS styles not applying — specificity conflict

View fix

Browse all error fixes