tailwind-v4-shadcn
CommunityAutomate Tailwind v4 setup with zero configuration errors.
Authorjezweb
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill eliminates the frustrating setup errors and debugging time when configuring Tailwind v4 with shadcn/ui, preventing common issues like tw-animate-css errors and broken dark mode.
Core Features & Use Cases
- Error-Free Setup: Automatically prevents 5 common Tailwind v4 configuration errors that waste hours of debugging.
- Production-Ready Architecture: Provides battle-tested CSS variable patterns for automatic dark mode switching.
- Use Case: Imagine you're starting a new React project and need Tailwind v4 with shadcn/ui. Use this Skill to get a working setup in under a minute instead of spending hours troubleshooting.
Quick Start
Set up a new Vite + React project with Tailwind v4 and shadcn/ui components.
Dependency Matrix
Required Modules
tailwindcss@tailwindcss/viteclsxtailwind-mergereactreact-dom@types/node@vitejs/plugin-reactvitetypescripttw-animate-css
Components
references
💻 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-v4-shadcn Download link: https://github.com/jezweb/claude-skills/archive/main.zip#tailwind-v4-shadcn 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 471,000+ vetted skills library on demand.