tailwind-v4-shadcn

Install tailwindcss and @tailwindcss/vite, add the tailwindcss() plugin to vite.config.ts, run shadcn init, then set "config": "" in components.json and delete tailwind.config.ts. Define CSS variables in :root and .dark, then map them with @theme inline.

Create a ThemeProvider component that toggles the .dark class on the html element and persists the choice to localStorage. Wrap your app in ThemeProvider, define dark color overrides in a .dark CSS block, and add a dropdown toggle component.

The bg-primary utility only exists if you map your CSS variable in an @theme inline block with the --color-primary: var(--primary) syntax. Defining --primary in :root alone does not generate the utility class.

No, Tailwind v4 ignores tailwind.config.ts for theme configuration and uses CSS-first configuration instead. Delete the file and set "config": "" in components.json, or builds may fail.

Use the @plugin directive in your CSS file, for example @plugin "@tailwindcss/typography" after the tailwindcss import. The v3 approach of requiring plugins in a config file or using @import does not work in v4.

This happens from double hsl() wrapping, such as writing hsl(var(--background)) when the variable already contains hsl(). Reference variables directly with var(--background) in @layer base styles.