What is a Tailwind config in Tailwind CSS v4?
Tailwind CSS v4 is CSS-first: define theme variables with @theme and let source detection find classes. JavaScript configs remain available through @config.
Definition
In Tailwind CSS v4, customization is CSS-first. Theme variables declared with `@theme` create utilities, while automatic source detection finds class names in project files. A legacy JavaScript config is now a compatibility option loaded explicitly with `@config`, not the universal center of every Tailwind project.
How it works
Use `@theme` when brand values should create utilities such as `bg-brand-500` or `font-display`. Keep ordinary runtime variables in `:root` when they should not create utilities. Tailwind v4 scans project sources automatically; use `@source` when you need to register paths that automatic detection ignores. Existing v3-style JavaScript configuration can still be used, but v4 does not detect it automatically.
Why it matters
Copying a v3 `tailwind.config.ts` tutorial into a v4 project hides the current model and can leave the config unloaded. OneMinuteBranding currently exports that v3-style TypeScript file, so migrate its values into `@theme` for a native v4 setup instead of expecting v4 to detect it automatically. If you maintain a legacy JavaScript config, `@config` can load that `.js` file explicitly. Your brand system stays easier to inspect because the tokens and generated utilities live together.
Example
@import "tailwindcss";
/* Optional: load an existing v3-style config in v4. */
@config "../../tailwind.config.js";
@theme {
--color-brand-500: #6366f1;
--color-brand-700: #4338ca;
--font-display: "Satoshi", sans-serif;
}
Related terms
Skip the theory, generate the result
OneMinuteBranding turns your brief into three brand directions and a code-ready package — including tailwind config.
Generate your brand system for TailwindAccount required • US$49 one-time • localized price shown at checkout