# Class Formatting

**SHOULD** · **ID:** `content-class-formatting` · **Category:** content
**Source:** [Tailwind](https://tailwindcss.com/docs)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/content-class-formatting

> SHOULD: Use prettier-plugin-tailwindcss for automatic class ordering (layout → spacing → typography → colors)

Follow consistent class ordering and formatting conventions

Consistent class ordering makes code scannable and maintainable. The Prettier plugin for Tailwind CSS automatically sorts classes following the recommended order.

## Bad — do not do this

`content-class-formatting-bad`

```tsx
export function ClassFormattingBad() {
  return (
    <div className="w-full max-w-md space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-3">Random Class Order</h4>
        <div className="flex flex-col gap-4 rounded-lg bg-muted p-4 text-sm font-mono">
          <div className="space-y-1">
            <span className="text-xs text-error">/* Mixed, no pattern */</span>
            <code className="block text-error">hover:bg-primary/90 px-4 flex</code>
          </div>
          <div className="space-y-1">
            <code className="block text-error">text-white h-12 items-center</code>
          </div>
          <div className="space-y-1">
            <code className="block text-error">bg-primary py-2 w-full</code>
          </div>
          <div className="space-y-1">
            <code className="block text-error">rounded-lg font-medium text-sm</code>
          </div>
          <div className="space-y-1">
            <code className="block text-error">justify-between</code>
          </div>
        </div>
        <div className="mt-4 p-2 border border-error/30 rounded text-xs text-error">
          Same classes as Good example, but impossible to scan!
        </div>
      </div>
      <p className="text-xs text-error">
        Random order makes it hard to find or spot duplicate classes
      </p>
    </div>
  );
}
```

## Good — do this

`content-class-formatting-good`

```tsx
export function ClassFormattingGood() {
  return (
    <div className="w-full max-w-md space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-3">Organized Class Order</h4>
        <div className="flex flex-col gap-4 rounded-lg bg-muted p-4 text-sm font-mono">
          <div className="space-y-1">
            <span className="text-xs text-muted-foreground">/* Layout */</span>
            <code className="block">flex items-center justify-between</code>
          </div>
          <div className="space-y-1">
            <span className="text-xs text-muted-foreground">/* Sizing */</span>
            <code className="block">w-full h-12</code>
          </div>
          <div className="space-y-1">
            <span className="text-xs text-muted-foreground">/* Spacing */</span>
            <code className="block">px-4 py-2</code>
          </div>
          <div className="space-y-1">
            <span className="text-xs text-muted-foreground">/* Typography */</span>
            <code className="block">text-sm font-medium</code>
          </div>
          <div className="space-y-1">
            <span className="text-xs text-muted-foreground">/* Colors & Effects */</span>
            <code className="block">bg-primary text-white rounded-lg</code>
          </div>
          <div className="space-y-1">
            <span className="text-xs text-muted-foreground">/* Variants */</span>
            <code className="block">hover:bg-primary/90</code>
          </div>
        </div>
      </div>
      <p className="text-xs text-success">
        Consistent order makes classes scannable and maintainable
      </p>
    </div>
  );
}
```

## References

- [Prettier Plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss)
- [Class Sorting](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier)