0Pricing
Tailwind CSS Academy · Lesson

Team Conventions and Style Guide

Define a team style guide for class ordering, component naming, when to use @apply, and how to handle one-off arbitrary values consistently.

Why Teams Need a Tailwind Style Guide

Without agreed conventions, Tailwind projects drift into inconsistency. One developer writes p-4 everywhere, another uses px-4 py-4. One uses @apply liberally, another avoids it entirely. A team style guide documents the decisions your team has made so that everyone writes Tailwind the same way, making code reviews faster and the codebase easier to maintain.

Defining Class Ordering Conventions

Even with the Prettier plugin enforcing order automatically, your style guide should document why the canonical order is used and what it looks like so developers understand it rather than just following it blindly. Include the group order — layout, sizing, spacing, typography, visual, interactive — so team members can predict where a class belongs.

<!-- Canonical order groups -->
<div class="
  flex items-center gap-4    /* Layout */
  w-full max-w-md            /* Sizing */
  p-6 mx-auto                /* Spacing */
  text-sm font-medium        /* Typography */
  bg-white rounded-lg shadow /* Visual */
  hover:shadow-md transition  /* Interactive */
">

All lessons in this course

  1. Auditing Your CSS Output
  2. Class Sorting and Prettier Plugin
  3. Linting Tailwind With ESLint
  4. Team Conventions and Style Guide
← Back to Tailwind CSS Academy