| Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering color/theming problems. Covers: @theme inline pattern, CSS variable architecture, dark mode with ThemeProvider, component composition, vite.config setup, common v4 gotchas, and production-tested patterns.
The tailwind-v4-shadcn skill provides a production-tested setup for integrating Tailwind CSS v4 with shadcn/ui, Vite, and React. This skill addresses common challenges faced during the initialization of React projects using Tailwind v4, such as implementing dark mode, debugging CSS variable issues, and fixing theme switching problems. By leveraging this skill, users can streamline their setup process and avoid potential pitfalls that may arise when transitioning from Tailwind v3 or dealing with theming complications.
This skill reduces setup time significantly, minimizes errors, and enhances user confidence by providing a structured approach to integrating Tailwind v4 with React.
This skill is specifically designed for React projects and may not be directly compatible with other frameworks.
Refer to the common issues section in the documentation, which outlines known problems and their solutions.
Yes, the skill supports various Tailwind v4 plugins, including typography and forms plugins.
The skill is designed to work with the latest version of Vite that supports Tailwind CSS.
Quick Setup:
.claude/skills/Repository
secondsky/claude-skills