tailwind-v4-shadcn

You can set up Tailwind v4 with shadcn/ui by using an automated configuration that integrates Vite, applies the CSS variable architecture, and initializes ready-to-use components. This removes manual configuration errors and reduces setup time.

Yes, Tailwind v4 works with shadcn/ui and Vite for dark mode by utilizing a ThemeProvider and mapping CSS variables via the @theme inline directive. This architecture ensures proper dark mode toggling and styling inheritance.

The best way to configure CSS variables for shadcn/ui in Tailwind v4 is mapping them via @theme inline. This approach aligns with the clean config requirements by removing tailwind.config.ts and using the @tailwindcss/vite plugin.

You need to remove tailwind.config.ts because Tailwind v4 transitions to a CSS-first configuration model using @theme inline. This shift requires removing the JS config file and adopting the @tailwindcss/vite plugin for proper integration.

Yes, you can use @tailwindcss/vite to integrate shadcn/ui components without manual configuration. The automation handles the Vite integration, applies the necessary CSS variables, and prepares ready-to-use shadcn/ui components.

Common Tailwind v4 pitfalls when configuring shadcn/ui include improper CSS variable mapping and failing to remove tailwind.config.ts. The setup provides clear guidance on these v4 patterns to ensure a production-ready configuration.