tailwind-v4-shadcn

To set up Tailwind v4 with shadcn/ui in a React project, you need to configure a stable index.css, map semantic color tokens via @theme inline, and update your Vite configuration with the proper Tailwind plugins to achieve a production-ready styling stack.

Yes, Tailwind v4 works with shadcn/ui to support dark mode and CSS variables by using the @theme inline directive to map semantic color tokens. This approach ensures consistent theme architecture across your React application.

The best way to migrate from Tailwind v3 to v4 with shadcn/ui is to follow a non-invasive migration path. This involves updating your CSS variables architecture, applying the @theme inline mapping, and adjusting your tailwind plugin usage to maintain production readiness.

Your shadcn/ui dark mode configuration may break after upgrading to Tailwind v4 if your CSS variables are not properly mapped using the @theme inline directive. Applying the correct Tailwind plugin usage and theme mapping ensures dark mode functions as expected.

Yes, you can use Vite to configure Tailwind v4 plugins for a shadcn/ui React app. The setup requires proper Vite configuration alongside a stable index.css to enable plugin usage and deliver a production-ready styling environment.

A key limitation when migrating is that existing CSS variables require remapping through the @theme inline directive to function in Tailwind v4. Without following a non-invasive migration path, semantic color tokens and dark mode support may fail to apply correctly.