Tailwind CSS v4: Unknown at-rule @tailwind or @apply without CSS import
CssSyntaxError: Unknown at-rule @tailwind (base). In Tailwind CSS v4, the @tailwind directive is replaced by @import 'tailwindcss';
Immediate Remediation
css
/* In globals.css: Replace legacy @tailwind directives with CSS-first v4 import */
@import "tailwindcss";
/* If you need custom theme overrides: */
@theme {
--font-display: "Inter", sans-serif;
--color-brand: #2563eb;
}Root Cause Analysis
Tailwind CSS v4 moved from JavaScript-based configuration (tailwind.config.js) and @tailwind directives to a native CSS-first engine using @import "tailwindcss".
Verification & Guardrails
- Remove legacy postcss plugins (tailwindcss) and replace with @tailwindcss/postcss in postcss.config.mjs.
- Delete old tailwind.config.js if you configure styles directly in CSS @theme blocks.
Have a custom or uncategorized crash?
Run your trace through our in-memory client privacy sandbox for instant SRE remediation.