tailwind

Tailwind v4 uses CSS-first configuration where all theme settings live in a @theme block inside your CSS file. Define colors, fonts, and breakpoints as CSS variables like --color-brand, and load plugins with the @plugin directive instead of require().

Run the official upgrade tool with npx @tailwindcss/upgrade@latest, which updates dependencies and converts your config to @theme blocks. For complex setups, manually replace @tailwind directives with @import "tailwindcss", move utilities to @utility, and swap tailwindcss-animate for tw-animate-css.

Yes, Tailwind v4 supports class-based dark mode by defining @custom-variant dark (&:where(.dark, .dark *)) in your CSS. This makes the dark: variant respond to a .dark class on the html element instead of prefers-color-scheme.

The bg-primary utility fails when the @theme inline mapping block is missing. Add --color-primary: var(--primary) inside @theme inline so Tailwind generates the utility class from your CSS variable.

Yes, shadcn/ui works with Tailwind v4 by setting "config": "" in components.json and deleting tailwind.config.ts. Define :root and .dark variables at root level, map them in @theme inline, and use tw-animate-css instead of tailwindcss-animate.

Use @theme inline for single-theme setups with a light/dark toggle, such as the default shadcn/ui pattern, since values are inlined at build time. Use @theme without inline for multi-theme systems or dynamic theme switching, because it keeps runtime variable references.