Why does it recommend deleting tailwind.config.ts?

Tailwind v4 moves configuration directly into your CSS files using the @theme directive, making the legacy JS/TS config file unnecessary and potentially conflicting.

Does this skill support Tailwind CSS v3?

No, this skill is specifically architected for the breaking changes and new CSS-first features of Tailwind v4.

What is the benefit of the OKLCH color space included in this skill?

OKLCH provides perceptually uniform colors and better gradients, ensuring your UI looks consistent and vibrant across different devices while maintaining high accessibility standards.

How does it handle dark mode differently in v4?

It uses a standardized four-step pattern involving CSS variables and @theme inline mapping to ensure themes switch automatically without requiring redundant dark: variants.

Can I use this with frameworks other than Vite/React?

While the core CSS principles apply broadly, the current implementation and templates are specifically optimized for Vite and React environments common in shadcn/ui deployments.

Tailwind v4 & shadcn/ui Integration

Name: Tailwind v4 & shadcn/ui Integration
Author: evolv3ai

byevolv3ai

0•

Design Tools

Streamlines the setup and configuration of Tailwind CSS v4 with shadcn/ui components using a production-ready four-step architecture.

This skill provides a specialized workflow for integrating Tailwind CSS v4 with shadcn/ui, addressing common breaking changes and configuration hurdles found in the v4 ecosystem. It automates the transition from v3 configuration files to the new CSS-first @theme architecture, ensures proper dark mode implementation through a dedicated ThemeProvider, and proactively prevents eight documented errors related to animations, variable mapping, and CSS layer ordering. Ideal for developers building modern React applications with Vite, it ensures a robust, type-safe styling foundation that leverages the latest OKLCH color space and performance improvements.

Key Features

01Automated Tailwind v4 and shadcn/ui initialization for Vite-based React projects.

02Proactive prevention of 8 critical errors, including tw-animate-css conflicts and @apply breaking changes.

030 GitHub stars

04Enforces a mandatory four-step architecture for reliable CSS variable mapping and theme consistency.

05Optimized components.json and vite.config.ts templates specifically for v4 compatibility.

06Full support for the OKLCH color space and automatic dark mode synchronization.

Use Cases

01Troubleshooting broken styles, dark mode issues, or animation errors in a Tailwind v4 environment.

02Migrating existing projects from Tailwind v3 to v4 while maintaining shadcn/ui compatibility.

03Initializing new React projects with Tailwind v4 and the shadcn/ui component library.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add evolv3ai/claude-skills-archive tailwind-v4-shadcn

For use in Claude.ai and ChatGPT

Download Skill