Does this skill support React and shadcn/ui patterns?

Yes, it includes implementation patterns for modern React components following the shadcn/ui style, including slot support and tailwind-merge integration.

How does Tailwind v4 differ from v3 in configuration?

Tailwind v4 moves away from tailwind.config.js to a CSS-first approach, where all configuration happens directly in your CSS files using the @theme directive.

How do I handle component state in Tailwind v4?

This skill recommends using native data attributes (e.g., data-loading) which Tailwind v4 supports natively with modifiers for cleaner state management.

When should I use CVA over pure Tailwind utilities?

You should use Class Variance Authority (CVA) when a component requires 3 or more variants or when you need strict type safety for a component library.

Tailwind CSS v4 Best Practices

Name: Tailwind CSS v4 Best Practices
Author: Microck

byMicrock

•

设计工具

Implements modern Tailwind CSS v4 patterns and component architectures using a CSS-first approach and efficient variant management.

This skill provides comprehensive guidance for architecting frontend components using Tailwind CSS v4. It helps developers transition from version 3 by emphasizing the new CSS-first configuration via the @theme directive, while providing a clear decision matrix for when to use pure utilities versus abstraction libraries like Class Variance Authority (CVA) or tailwind-variants. It includes best practices for state management using native data attributes, accessibility checklists, and modern React patterns inspired by shadcn/ui to ensure production-grade, type-safe, and performant UI components.

主要功能

01Tailwind v4 CSS-first configuration and @theme directive implementation

02Decision logic for CVA vs. tailwind-variants vs. pure utilities

03Automated migration guidance for Tailwind v3 to v4 breaking changes

04Accessibility-first component patterns for modern React applications

052 GitHub stars

06Advanced state management using native data attributes and custom variants

使用场景

01Optimizing frontend bundle sizes by following standard utility-first principles

02Building a scalable, type-safe design system using CVA or tailwind-variants

03Migrating a legacy Tailwind v3 project to the high-performance v4 Oxide engine

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add microck/opendots-microck flpbalada-code-architecture-tailwind-v4-best-practices

For use in Claude.ai and ChatGPT

主要功能

01Tailwind v4 CSS-first configuration and @theme directive implementation

02Decision logic for CVA vs. tailwind-variants vs. pure utilities

03Automated migration guidance for Tailwind v3 to v4 breaking changes

04Accessibility-first component patterns for modern React applications

052 GitHub stars

06Advanced state management using native data attributes and custom variants

使用场景

01Optimizing frontend bundle sizes by following standard utility-first principles

02Building a scalable, type-safe design system using CVA or tailwind-variants

03Migrating a legacy Tailwind v3 project to the high-performance v4 Oxide engine

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add microck/opendots-microck flpbalada-code-architecture-tailwind-v4-best-practices

For use in Claude.ai and ChatGPT