tailwind-v4-shadcn
Get a battle-tested foundation for React projects using Tailwind v4 and shadcn/ui, complete with dark mode, semantic color tokens, and Vite integration. This skill covers the four-step CSS architecture, theme switching, and solutions to common v4 migration issues—all designed to eliminate setup errors and cut configuration time dramatically.
Tailwind v4 + shadcn/ui provides production-ready patterns for initializing React projects with Tailwind v4, dark mode, and CSS variables.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-25
Tailwind v4 + shadcn/ui provides production-ready patterns for initializing React projects with Tailwind v4, dark mode, and CSS variables. Get a battle-tested foundation for React projects using Tailwind v4 and shadcn/ui, complete with dark mode, semantic color tokens, and Vite integration. This skill covers the four-step CSS architecture, theme switching, and solutions to common v4 migration issues—all designed to eliminate setup errors and cut configuration time dramatically.
Use it when
- tailwind-v4-shadcn covers theme switching using CSS variables and the @theme inline pattern.
- tailwind-v4-shadcn addresses the most common v4 color issues: CSS variables not registered in @theme, missing layer directives in your CSS.
Verify before relying
Read SKILL.md below before installing (12 files). Open directory: indexed for reading, not audited.
Install
secondsky/claude-skills/tailwind-v4-shadcn · repository language: TypeScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I set up Tailwind v4 with shadcn/ui in a React project?
tailwind-v4-shadcn provides a complete initialization workflow: install Tailwind v4 and shadcn/ui dependencies, configure your CSS with the four-step architecture (layer directives, @theme block, semantic tokens, and @plugin imports), set up your components.json for shadcn, and integrate Vite if needed. The skill includes ready-to-use configuration templates that eliminate common setup errors and ensure your color tokens, typography, and component styles work immediately.
What's the best way to implement dark mode with theme switching in Tailwind v4?
tailwind-v4-shadcn covers theme switching using CSS variables and the @theme inline pattern. Set up HSL color variables in your CSS layer, create a theme provider component that toggles the `dark` class on your root element, and use Tailwind's semantic tokens (like `bg-primary`) to automatically adapt. The skill includes provider implementations and hooks for managing light/dark state across your entire React app.
Why are my Tailwind v4 colors not applying and how do I fix it?
tailwind-v4-shadcn addresses the most common v4 color issues: CSS variables not registered in @theme, missing layer directives in your CSS, or incorrect HSL syntax. The skill provides debugging steps to verify your theme configuration, validate that semantic tokens like `primary` and `accent` are properly bound to CSS variables, and confirm your Vite plugin is processing the @theme block correctly.
How do I migrate from Tailwind v3 to v4 with shadcn/ui?
tailwind-v4-shadcn walks through the migration path: update your Tailwind config to use the new CSS-first approach, convert your color palette to HSL variables in the CSS layer, replace the old config-based theme with @theme directives, and update shadcn component imports if needed. The skill highlights breaking changes, deprecations, and provides side-by-side examples so your existing v3 projects transition smoothly.
What is the @theme inline pattern and how does Tailwind v4 CSS variables work?
tailwind-v4-shadcn explains Tailwind v4's four-step CSS architecture: define CSS variables in your layer, use @theme to register them with Tailwind, bind semantic tokens (primary, secondary, accent) to those variables, and apply @plugin directives for forms and typography. This architecture replaces v3's config-based theming, giving you direct control over your design tokens and making dark mode and dynamic themes far simpler to implement.
How do I configure Tailwind v4 with Vite and shadcn/ui components?
tailwind-v4-shadcn includes Vite-specific setup: install the Tailwind Vite plugin, configure your vite.config.js to process CSS layers and @theme directives, set up your components.json with the correct paths, and ensure your CSS entry point loads before React mounts. The skill provides complete starter templates and troubleshooting for common Vite + Tailwind v4 integration issues.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
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
(truncated - see the full file via the links below)
File tree — 12 files
plugins/tailwind-v4-shadcn/skills/tailwind-v4-shadcn/SKILL.md
plugins/tailwind-v4-shadcn/skills/tailwind-v4-shadcn/references/advanced-usage.md
plugins/tailwind-v4-shadcn/skills/tailwind-v4-shadcn/references/common-gotchas.md
plugins/tailwind-v4-shadcn/skills/tailwind-v4-shadcn/references/dark-mode.md
plugins/tailwind-v4-shadcn/skills/tailwind-v4-shadcn/references/migration-guide.md
plugins/tailwind-v4-shadcn/skills/tailwind-v4-shadcn/references/plugins-reference.md
plugins/tailwind-v4-shadcn/skills/tailwind-v4-shadcn/templates/components.json
plugins/tailwind-v4-shadcn/skills/tailwind-v4-shadcn/templates/index.css
plugins/tailwind-v4-shadcn/skills/tailwind-v4-shadcn/templates/theme-provider.tsx
plugins/tailwind-v4-shadcn/skills/tailwind-v4-shadcn/templates/tsconfig.app.json
plugins/tailwind-v4-shadcn/skills/tailwind-v4-shadcn/templates/utils.ts
plugins/tailwind-v4-shadcn/skills/tailwind-v4-shadcn/templates/vite.config.ts
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Initialize a new React project with Tailwind v4 and shadcn/ui”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Tailwind Theme Builder guides you through establishing a fully themed Tailwind v4 project with shadcn/ui components and dark mode support. It implements a required four-step architecture using CSS variables, @theme inline mapping, and a theme provider to enable seamless light/dark switching without component rewrites.
This skill guides you through building modern frontend projects with Vite, React, and TailwindCSS v4, including proper configuration, project structure, and component patterns. It covers environment setup, TypeScript configuration pitfalls to avoid, and practical development conventions using lucide-react icons.
This skill guides you through initializing Shadcn UI and Tailwind CSS v4 specifically for Vite projects. It handles TypeScript path configuration, Vite plugin setup, component installation, and dependency verification to ensure everything works together.
Aceternity UI is a production-ready component library offering 100+ animated, interactive React elements designed for Next.js applications. Built with Tailwind CSS and Framer Motion, it includes hero sections, parallax effects, 3D cards, and background animations—all installable via shadcn CLI with full source code access for customization.
shadcn/ui provides production-ready React components you copy directly into your project rather than installing as a package. Built on Radix UI primitives and styled with Tailwind CSS, each component gives you full customization control and transparent implementation.
Inspira UI provides over 120 copy-paste animated components designed for Vue 3 and Nuxt 4 projects. Built with TailwindCSS v4, motion-v, GSAP, and Three.js, it covers hero sections, 3D effects, text animations, interactive cursors, and particle systems—all production-tested and MIT-licensed.
More skills Shadcn (NOASSERTION) · Shadcn Ui (unlicensed) · Tailwind (unlicensed) · Shadcn Skills (unlicensed) · nuxt-production (MIT) · Tailwind Design System (AGPL-3.0) · Ui Design System (unlicensed)