Tailwind CSS v4 Best Practices

When to Use

• 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

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

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