Loading...
Loading...
Error: Tailwind v4 JIT Compilation Failure. Native CSS engine could not resolve @theme variables.Tailwind v4 introduces a revolutionary CSS-first engine that delegates much of the work to native CSS variables. JIT failures in v4 usually stem from malformed @theme blocks or incompatible PostCSS configurations that haven't been migrated to the new lightening-css pipeline.
Ensure your custom colors and breakpoints are defined inside the new CSS @theme block.
@theme {
--color-brand: #ff0000;
}Tailwind v4 works best without a postcss.config.js. Try removing it if you are using the native Vite/Next.js integration.
Tailwind v4 represents a complete architectural overhaul, moving away from the JavaScript-heavy configuration model to a CSS-first engine built on top of Lightning CSS.
In v4, the @theme block isn't just a configuration object; it's a living CSS variable registry. If the JIT (Just-In-Time) engine fails, it's often because a native CSS processor (like an old version of PostCSS) is trying to interpret the @theme block before Tailwind can process it. This leads to a 'CSS variable not found' error in the browser.
The goal of v4 is Zero-Config. Most projects should delete their tailwind.config.js entirely and move all customizations into their CSS files using the tailwindcss v4 spec. If you are seeing JIT failures, it is almost always due to an accidental mix of v3 config patterns and v4 engine logic.