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

★ 196 ⁮ 29 MIT updated 2026-07-25 by secondsky

Install

secondsky/claude-skills/tailwind-v4-shadcn · repository language: TypeScript

Manual (git clone) CLI (skillfed)

git clone https://github.com/secondsky/claude-skills
cp -r claude-skills/plugins/tailwind-v4-shadcn/skills/tailwind-v4-shadcn ~/.claude/skills/tailwind-v4-shadcn

npx skillfed install secondsky/claude-skills/tailwind-v4-shadcn

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