Does this fix the @apply breaking changes in v4?

Yes, it provides the correct @utility pattern to replace legacy @layer base and @layer components usage that often breaks during v4 migrations.

What is OKLCH support?

It leverages the OKLCH color space introduced in Tailwind v4 for better perceptual consistency and more vibrant colors across high-end displays while providing sRGB fallbacks.

Why does it require removing tailwind.config.ts?

Tailwind v4 moves theme configuration directly into your CSS files using the @theme directive, making the legacy JavaScript/TypeScript config files obsolete.

Does this skill support Tailwind v3?

No, this skill is specifically optimized for Tailwind v4's new engine, which uses a CSS-first configuration and a dedicated Vite plugin system.

How does the automatic dark mode work?

It uses a CSS variable-based architecture where utilities reference variables that update automatically based on the presence of a .dark class, removing the need for manual dark: utility variants.

Tailwind v4 & shadcn/ui Integration

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

bypiotroq

0•

디자인 도구

Configures production-ready Tailwind CSS v4 and shadcn/ui stacks using optimized CSS variable architecture and modern Vite patterns.

This skill provides a comprehensive blueprint for initializing React projects with Tailwind CSS v4 and shadcn/ui, specifically designed to bypass common migration hurdles and architectural errors. It implements a robust four-step CSS variable pattern that ensures automatic dark mode functionality, handles the transition from legacy PostCSS configs to the modern Vite plugin, and incorporates advanced features like the OKLCH color space for superior visual consistency and design accuracy.

주요 기능

010 GitHub stars

02Prevention of 8 documented common errors including @apply and @layer cascade conflicts.

03Automated Tailwind v4 and shadcn/ui setup for Vite-based React projects.

04Optimized integration with tw-animate-css to replace deprecated animation plugins.

05Native OKLCH color space support with automatic sRGB fallbacks for modern displays.

06Four-step CSS variable architecture for seamless automatic dark mode implementation.

사용 사례

01Migrating existing Tailwind v3 projects to v4 while maintaining full shadcn/ui compatibility.

02Initializing a new React application with the latest Tailwind v4 and shadcn/ui component library.

03Troubleshooting broken dark mode, animation errors, or CSS variable mapping in modern frontend stacks.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add piotroq/adwokat-trzebnica-html-to-php-com tailwind-v4-shadcn

For use in Claude.ai and ChatGPT

주요 기능

010 GitHub stars

02Prevention of 8 documented common errors including @apply and @layer cascade conflicts.

03Automated Tailwind v4 and shadcn/ui setup for Vite-based React projects.

04Optimized integration with tw-animate-css to replace deprecated animation plugins.

05Native OKLCH color space support with automatic sRGB fallbacks for modern displays.

06Four-step CSS variable architecture for seamless automatic dark mode implementation.

사용 사례

01Migrating existing Tailwind v3 projects to v4 while maintaining full shadcn/ui compatibility.

02Initializing a new React application with the latest Tailwind v4 and shadcn/ui component library.

03Troubleshooting broken dark mode, animation errors, or CSS variable mapping in modern frontend stacks.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add piotroq/adwokat-trzebnica-html-to-php-com tailwind-v4-shadcn

For use in Claude.ai and ChatGPT