Claude MarketplacesSubmit
secondsky avatar

Tailwind V4 Shadcn

secondsky/claude-skills

This is the setup guide you want bookmarked if you're using Tailwind v4 with shadcn/ui. It's production tested and built around the four-step architecture pattern that actually works: CSS variables at root, theme inline mappings, base layer styles, automatic dark mode. The author documents real results (70% token reduction, zero errors vs the usual 2-3 gotchas) and calls out the specific mistakes that break v4 projects, like putting root variables inside layer base or double-wrapping hsl values. Includes working templates for ThemeProvider, complete dependency lists, and a troubleshooting section for the plugin syntax issues that trip people up. Worth using just to avoid the tw-animate-css import error alone.

skills.sh installs
8.2K
GitHub stars
248
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add secondsky/claude-skills --skill tailwind-v4-shadcn --agent claude-code

Installs into .claude/skills of the current project.

Files

Tailwind v4 + shadcn/ui Production Stack

Production-tested: WordPress Auditor (https://wordpress-auditor.webfonts.workers.dev) Last Updated: 2025-12-04 Status: Production Ready ✅

Table of Contents

  1. Before You Start
  2. Quick Start
  3. Four-Step Architecture
  4. Dark Mode Setup
  5. Critical Rules
  6. Semantic Color Tokens
  7. Common Issues & Fixes
  8. File Templates
  9. Setup Checklist
  10. Advanced Topics
  11. Dependencies
  12. Tailwind v4 Plugins
  13. Reference Documentation
  14. When to Load References

⚠️ BEFORE YOU START (READ THIS!)

CRITICAL FOR AI AGENTS: If you're Claude Code helping a user set up Tailwind v4:

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/secondsky/claude-skills
Categories
Frontend Development, Code Review & Quality, Debugging, Design & UI/UX
First seen
May 16, 2026

More from secondsky/claude-skills

All 146

Recommended

More Frontend Development
1forcedotcom avatarexperience-ui-bundle-frontend-generateforcedotcom/sf-skillsMUST activate before editing ANY file under uiBundles/*/src/ (or the bundle's index.html) for visual or UI changes to an EXISTING app — pages, components, secti5.3Kskills.sh installs
2mindrally avatarnextjs-react-typescriptmindrally/skillsExpert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI and Tailwind5.3Kskills.sh installs
3forcedotcom avatarbuilding-ui-bundle-frontendforcedotcom/sf-skillsMUST activate before editing ANY file under uiBundles/*/src/ for visual or UI changes to an EXISTING app — pages, components, sections, layout, styling, colors,3.7Kskills.sh installs
4jezweb avatartailwind-v4-shadcnjezweb/claude-skillsSet up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture. Four-step pattern: CSS variables, Tailwind mapping, base styles, au2.7Kskills.sh installs
5vercel-labs avatarshadcn-sveltevercel-labs/json-renderPre-built shadcn-svelte components for json-render Svelte apps. Use when working with @json-render/shadcn-svelte, adding standard UI components to a Svelte cata1.2Kskills.sh installs
6laguagu avatarnextjs-shadcnlaguagu/claude-code-nextjs-skillsCreates Next.js frontends with shadcn/ui. Use when building React UIs, components, pages, or applications with shadcn, Tailwind, or modern frontend patterns. Al845skills.sh installs