tailwind-v4-shadcn

To set up Tailwind CSS v4 with shadcn/ui and Vite, you need to install specific dependencies and configure your Vite environment, components.json, and vite.config.ts. This setup provides a production-tested configuration for React projects.

Yes, this Tailwind v4 setup fully supports dark mode. It handles dark mode integration, CSS variable architecture, and theme switching to ensure secure and efficient styling across your React application.

Migrating from Tailwind v3 to v4 with shadcn/ui involves updating your configuration and dependencies. This setup handles the migration process while preventing common pitfalls like duplicate @layer base blocks and incorrect template selection.

A tw-animate-css import error in Tailwind v4 often occurs due to incorrect configuration. This setup specifically prevents common issues like tw-animate-css import errors, duplicate @layer base blocks, and incorrect template selection.

Required dependencies to configure Tailwind v4 with shadcn/ui include tailwindcss, @tailwindcss/vite, clsx, tailwind-merge, Radix UI components, lucide-react, and standard Vite React TypeScript packages.

You cannot skip CSS variable configuration entirely, but this setup automates the architecture for you. It establishes the necessary CSS variable architecture required for shadcn/ui theming and dark mode functionality.