tailwind-theme-builder
CommunityBuild Tailwind v4 + shadcn/ui themes
AuthorSonPaier
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill streamlines the setup of Tailwind CSS v4 with shadcn/ui, ensuring a correctly configured, themed, and dark-mode-ready project from the start. It resolves common issues related to CSS variables, dark mode conflicts, and v3 migration.
Core Features & Use Cases
- Automated Tailwind v4 Setup: Installs necessary dependencies and configures Vite for Tailwind v4.
- Shadcn/ui Theming: Integrates shadcn/ui with CSS variables for a robust theming system.
- Dark Mode Implementation: Sets up seamless dark mode switching using a ThemeProvider.
- Error Resolution: Fixes issues like broken colors,
@applyerrors, and animation conflicts. - Use Case: When starting a new React project that requires Tailwind v4 and shadcn/ui, use this Skill to quickly establish a consistent and customizable design system.
Quick Start
Run the pnpm commands to install dependencies and initialize shadcn/ui.
Dependency Matrix
Required Modules
tailwindcss@tailwindcss/vite@types/nodetw-animate-css
Components
scriptsreferencesassets
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: tailwind-theme-builder Download link: https://github.com/SonPaier/carfect/archive/main.zip#tailwind-theme-builder Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.