Skills
.Work. You
Rest

code-architecture-tailwind-v4-best-practices

Community

Tailwind v4 patterns for scalable UI components.

Software Engineering#tailwind#cva#frontend-patterns#css-first#component-design#tailwind-variants
Authorflpbalada
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill guides teams through selecting the right abstraction level for Tailwind CSS v4 components, helping you balance rapid prototyping with maintainable design systems.

Core Features & Use Cases

  • Pure Utilities: Use direct utilities for simple components with 1-2 variants.
  • CVA: Apply class-variance-authority when you need 3+ variants and type-safe composition.
  • Tailwind Variants: Employ Tailwind-Variants for complex, multi-slot components and responsive design.
  • Decision Guidance: Choose between CSS-first tokens, CVA, or Tailwind Variants based on project needs.

Quick Start

Start by evaluating a component: if it has 1–2 variants, implement with Pure Utilities; if 3+ variants, implement with CVA; for multi-slot components, use Tailwind Variants.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: code-architecture-tailwind-v4-best-practices
Download link: https://github.com/flpbalada/my-opencode-config/archive/main.zip#code-architecture-tailwind-v4-best-practices

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.