tailwind-v4-shadcn

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

Create a ThemeProvider component that toggles a .dark class on the html element and persists the choice to localStorage. Define dark color overrides in a .dark CSS block; semantic utilities like bg-primary then switch automatically without dark: variants.

The utility class doesn't exist because the CSS variable was never mapped to Tailwind's theme. Add an @theme inline block that maps each variable, for example --color-primary: var(--primary), which generates the bg-primary utility.

No. Tailwind v4 ignores theme.extend.colors in tailwind.config.ts and uses CSS-first configuration instead. Delete the file and set "tailwind": { "config": "" } in components.json so shadcn/ui generates v4-compatible styles.

Install @tailwindcss/typography, then load it in your CSS with the @plugin directive: @plugin "@tailwindcss/typography" after @import "tailwindcss". Using @import or the v3 config file plugins array will fail in v4.

This usually comes from double hsl() wrapping, such as background-color: hsl(var(--background)) when the variable already contains hsl(). Reference variables directly with var(--background) in @layer base to fix it.