Streamlines the setup and configuration of Tailwind CSS v4 with shadcn/ui components using a production-ready four-step architecture.
This skill provides a specialized workflow for integrating Tailwind CSS v4 with shadcn/ui, addressing common breaking changes and configuration hurdles found in the v4 ecosystem. It automates the transition from v3 configuration files to the new CSS-first @theme architecture, ensures proper dark mode implementation through a dedicated ThemeProvider, and proactively prevents eight documented errors related to animations, variable mapping, and CSS layer ordering. Ideal for developers building modern React applications with Vite, it ensures a robust, type-safe styling foundation that leverages the latest OKLCH color space and performance improvements.
주요 기능
01Automated Tailwind v4 and shadcn/ui initialization for Vite-based React projects.
02Proactive prevention of 8 critical errors, including tw-animate-css conflicts and @apply breaking changes.
030 GitHub stars
04Enforces a mandatory four-step architecture for reliable CSS variable mapping and theme consistency.
05Optimized components.json and vite.config.ts templates specifically for v4 compatibility.
06Full support for the OKLCH color space and automatic dark mode synchronization.
사용 사례
01Troubleshooting broken styles, dark mode issues, or animation errors in a Tailwind v4 environment.
02Migrating existing projects from Tailwind v3 to v4 while maintaining shadcn/ui compatibility.
03Initializing new React projects with Tailwind v4 and the shadcn/ui component library.
