gotchacsstailwindCritical
Tailwind v4 removes tailwind.config.js in favor of CSS-first config
Viewed 0 times
Tailwind CSS v4.0+
tailwind v4oxide engine@themecss-first configmigrationbreaking change
Problem
After upgrading to Tailwind CSS v4, the tailwind.config.js file is no longer picked up automatically. Custom theme values, content paths, and plugins defined there are silently ignored.
Solution
In Tailwind v4 all configuration lives inside your CSS entry file using @import and @theme directives. Migrate your config:
Content detection is now automatic via Oxide's file scanner — you no longer need to specify content globs for most setups.
/* app.css */
@import "tailwindcss";
@theme {
--color-brand: #6d28d9;
--font-sans: 'Inter', sans-serif;
--spacing-18: 4.5rem;
}Content detection is now automatic via Oxide's file scanner — you no longer need to specify content globs for most setups.
Why
Tailwind v4 rewrote the engine in Rust (Oxide) and adopted a CSS-native configuration model. The JS config file is still supported via @config for incremental migration but is not the primary path.
Gotchas
- Plugins that rely on the JS config API need to be updated to v4-compatible versions.
- The @config directive can load a legacy tailwind.config.js but not all options are supported.
- Design token variable names in @theme must use CSS custom property syntax with -- prefix.
- The content array is gone by default — if Oxide misses files (e.g. template strings in a monorepo), you must add explicit @source directives.
Context
When upgrading from Tailwind v3 to v4 in an existing project.
Revisions (0)
No revisions yet.