Tailwind CSS v4 Best Practices

Setup and styling patterns for Tailwind CSS v4 projects.

When to Use

Use this skill when:

• Setting up Tailwind CSS v4 in a project
• Writing component styles with Tailwind utilities
• Deciding when to extract custom CSS vs using utilities
• Avoiding style drift and maintaining consistency

Non-Negotiables (MUST)

• Import Tailwind via a single global CSS entry: @import 'tailwindcss';
• Keep that global CSS imported from the root layout.
• Prefer Tailwind utilities in className for most styling.
• Avoid large custom CSS files; keep custom CSS truly global (resets, tokens).
• Avoid heavy use of arbitrary values unless necessary; prefer consistent tokens.

Class Strategy

• If class strings become hard to read:
  • Extract a small presentational component.
  • Or extract a components/<area>/... wrapper rather than inventing large custom CSS.

Rules

Setup

• tailwind-setup - Tailwind CSS v4 setup (single global CSS import)

Class Strategy

• tailwind-class-strategy - Prefer utilities, extract components when needed
• tailwind-avoid-drift - Avoid style drift (keep custom CSS global, prefer tokens)

Ordering

• tailwind-css-ordering - CSS order depends on import order

Related Skills

• busirocket-react - Component extraction patterns

How to Use

Read individual rule files for detailed explanations and code examples:

rules/tailwind-setup.md
rules/tailwind-class-strategy.md
rules/tailwind-avoid-drift.md

Each rule file contains:

• Brief explanation of why it matters
• Code examples (correct and incorrect patterns)
• Additional context and best practices