CSS Error1 Fix Available

Fix: Tailwind CSS v4 @theme Not Found

Error: The @theme function must use a variable defined in your CSS or the default theme.

What does this error mean?

Tailwind v4 moves configuration from tailwind.config.js into your CSS files using the @theme directive. This error occurs when you try to access a variable that hasn't been defined in the @theme block.

Common Causes

Trying to use a v3-style config object in v4
Missing --font-sans or --color-primary in the @theme block
Incorrect import order in your global CSS file

How to Fix It (1 Solution)

Define Variables in @theme

Ensure all your custom values are wrapped in the @theme block in your CSS.

Code

@theme {
  --color-brand: #3b82f6;
  --font-display: 'Inter', sans-serif;
}

Fix this error faster with our free tool

Tailwind v4 Palette Optimizer

Open Tailwind v4 Palette Optimizer

Related Errors

CSS

CSS styles not applying — specificity issue

View fix

CSS

CSS styles not applying — specificity conflict

View fix

CSS

Flexbox not centering / flex properties not working

View fix

Browse all error fixes