tailwind-v4-shadcn
Tailwind v4 with shadcn/ui using CSS variables and @theme inline pattern.
- Four-step architecture: define CSS variables at root, map to Tailwind utilities with
@theme inline, apply base styles, automatic dark mode switching - Prevents 8 documented errors including color mapping failures, dark mode conflicts, @apply breaking changes, and v3 migration gotchas
- Requires
@tailwindcss/viteplugin (not PostCSS), empty Tailwind config in components.json, and ThemeProvider wrapper for theme toggling - Supports OKLCH color space (v4 default), built-in container queries and line clamp, and multi-theme setups with proper CSS layer ordering
Tailwind v4 + shadcn/ui Production Stack
Production-tested: WordPress Auditor (https://wordpress-auditor.webfonts.workers.dev) Last Updated: 2026-01-20 Versions: tailwindcss@4.1.18, @tailwindcss/vite@4.1.18 Status: Production Ready ✅
Quick Start (Follow This Exact Order)
# 1. Install dependencies
pnpm add tailwindcss @tailwindcss/vite
pnpm add -D @types/node tw-animate-css
pnpm dlx shadcn@latest init
# 2. Delete v3 config if exists
rm tailwind.config.ts # v4 doesn't use this file
More from jezweb/claude-skills
tanstack-query
|
2.5Kshadcn-ui
Install and configure shadcn/ui components for React projects. Guides component selection, installation order, dependency management, customisation with semantic tokens, and common UI recipes (forms, data tables, navigation, modals). Use after tailwind-theme-builder has set up the theme infrastructure, when adding components, building forms, creating data tables, or setting up navigation.
2.5Ktailwind-theme-builder
>
2.2Kfastapi
|
2.0Kcolor-palette
>
1.9Ktanstack-start
Build a full-stack TanStack Start app on Cloudflare Workers from scratch — SSR, file-based routing, server functions, D1+Drizzle, better-auth, Tailwind v4+shadcn/ui. No template repo — Claude generates every file fresh per project.
1.6K