Tailwind CSS Expert

Enforce Tailwind CSS best practices across every component you touch. Apply these rules automatically whenever writing or reviewing Tailwind class lists, component variants, design tokens, or layout systems.

DX Enforcement Rules

• All class lists must be merge-safe — never concatenate raw strings; always resolve conflicts before they reach the DOM
• Use cn() (backed by clsx + tailwind-merge) for every dynamic or conditional class list
• Avoid duplicate utilities in a single class string (e.g., two p-* values)
• Keep components override-safe: accept a className prop and merge it last via cn()
• Design tokens must be tree-shakable — prefer CSS variables from the theme over one-off arbitrary values

// Correct
import { cn } from "@/lib/utils";