tailwind-v4-shadcn

Tailwind v4 uses a new Vite plugin and CSS-based configuration, replacing the legacy tailwind.config.js file used in v3. This Skill configures the v4 integration correctly to bypass outdated v3 patterns and prevent common migration errors.

This setup prevents eight documented configuration and migration errors related to Tailwind v4 and shadcn/ui, including legacy v3 pattern conflicts and CSS variable theming issues, ensuring a smooth integration process.

Initialize shadcn/ui in a React project by integrating its components through a CSS-variable-based theming architecture, which works alongside the configured Tailwind v4 setup to provide a robust UI foundation.

Yes, Tailwind v4 supports automatic dark mode switching by using a ThemeProvider alongside a CSS-variable-based architecture. This setup allows seamless theme toggling within your React application.

You can use shadcn/ui components with Vite and Tailwind v4 by integrating them through a CSS-variable-based theming architecture. This setup ensures compatibility and a robust UI foundation for React projects.

Common limitations when migrating to Tailwind v4 include legacy v3 configuration patterns that cause integration errors. This Skill addresses eight documented errors to bypass these issues and ensure a smooth setup.