Tailwind CSS

Quick reference for writing utility-first CSS with Tailwind v4. Each section summarizes the key rules — reference files provide full examples and edge cases.

Utility-First Approach

Write styles directly in markup using utility classes. Extract components, not CSS.

When to Inline

• Always — Utility classes go directly on elements. This is the default.
• Component reuse handles repetition — not CSS extraction.

When to Extract

• Base layer resets — body, h1–h6, a defaults in @layer base.
• Truly repeated patterns — Only when the same utility combination appears 5+ times across unrelated components AND cannot be solved with a React component.