🎯

tailwind-v4-shadcn

🎯Skill

from jezweb/claude-skills

What it does

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.

Overview

A Claude Code skill that provides a production-tested setup guide for Tailwind CSS v4 with shadcn/ui, using the @theme inline pattern and CSS variable architecture. It follows a mandatory four-step pattern (CSS variables, Tailwind mapping, base styles, automatic dark mode) and documents how to prevent 8 common configuration errors.

Key Features

Four-Step Architecture - Mandatory sequential setup: define CSS variables at root, map to Tailwind utilities via @theme inline, apply base styles, and achieve automatic dark mode without dark: variants
Error Prevention - Documents and prevents 8 common errors including tw-animate-css issues, @theme inline dark mode conflicts, @apply breaking, and v3 migration pitfalls
v4 Migration Ready - Handles the transition from Tailwind v3 (config file-based) to v4 (CSS-first) including removal of tailwind.config.ts
shadcn/ui Integration - Proper components.json configuration with empty tailwind config field for v4 compatibility and tw-animate-css setup
Automatic Dark Mode - CSS variable-driven theming that switches between light and dark modes automatically without per-component dark variant classes

Who is this for?

This skill is designed for React developers initializing projects with Tailwind CSS v4 and shadcn/ui who need a reliable, production-tested configuration pattern. It is particularly useful for developers experiencing color, animation, or dark mode issues after upgrading from Tailwind v3, or those starting fresh who want to avoid common setup mistakes.

📦

Same repository

jezweb/claude-skills(196 items)

tailwind-v4-shadcn

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code

npx vibeindex add jezweb/claude-skills --skill tailwind-v4-shadcn

skills.sh Install⚠ Installs to .agents/skills/ - may not be auto-recognized by Claude Code

npx skills add jezweb/claude-skills --skill tailwind-v4-shadcn

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/tailwind-v4-shadcn/SKILL.md

SKILL.md

2,669Installs

253

Last UpdatedJan 28, 2026

View on GitHub Back to Skills

More from this repository10

🎯

tanstack-query🎯Skill

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.

🎯

shadcn-ui🎯Skill

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.

🎯

tailwind-theme-builder🎯Skill

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.

🎯

fastapi🎯Skill

Provides FastAPI development patterns including async endpoints, dependency injection, Pydantic models, authentication, and API documentation best practices

🎯

color-palette🎯Skill

Skill for generating complete, accessible color palettes from a single brand hex, creating 11-shade scales, semantic tokens, dark mode variants, and WCAG contrast checking for Tailwind v4

🎯

tanstack start🎯Skill

Provides TanStack Start patterns for building full-stack React applications with server-side rendering, routing, and data loading

🎯

favicon-gen🎯Skill

Generates favicon files in multiple sizes and formats for web projects, from a collection of 87 production-ready skills for Cloudflare, React, and AI integrations.

🎯

zustand-state-management🎯Skill

Provides Zustand state management patterns for React including store creation, selectors, middleware, and best practices for scalable client-side state

🎯

react-hook-form-zod🎯Skill

Provides React Hook Form integration patterns with Zod schema validation for type-safe, performant form handling

🎯

ux-audit🎯Skill

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.