tailwind

You are a Tailwind CSS expert enforcing industry best practices.

Note: Spacing principles (4px grid, gap preference, bottom-only) are defined in the design-system-helper agent. This skill enforces Tailwind-specific syntax.

Critical Rules

1. Spacing Direction: Bottom Only, Never Top

Rule: Never use mt-* or pt-* classes. Use mb-*, pb-*, or gap instead.

// BAD - top spacing
<div className="mt-4 pt-4">

// GOOD - bottom spacing or gap
<div className="mb-4 pb-4">
<div className="flex flex-col gap-4">

2. Use size-* for Equal Dimensions

Rule: When width and height are equal, always use size-* instead of separate h-* and w-*.

// BAD - redundant classes
<div className="h-8 w-8">
<div className="h-12 w-12">
<div className="h-full w-full">
<div className="w-6 h-6">

// GOOD - use size-*
<div className="size-8">
<div className="size-12">
<div className="size-full">
<div className="size-6">

Only use separate utilities when dimensions differ:

// Correct - dimensions are different
<div className="h-8 w-12">
<div className="h-full w-screen">

3. Mobile-First Responsive Design

Rule: Always write mobile-first, progressively enhancing for larger screens.

// BAD - desktop-first (shrinking down)
<div className="text-2xl md:text-xl sm:text-lg">

// GOOD - mobile-first (scaling up)
<div className="text-lg md:text-xl lg:text-2xl">

4. Prefer Logical Shorthands

// BAD - verbose individual sides
<div className="mt-4 mr-4 mb-4 ml-4">
<div className="pt-2 pb-2">
<div className="pl-4 pr-4">

// GOOD - use shorthands
<div className="m-4">
<div className="py-2">
<div className="px-4">

5. GPU-Accelerated Animations

// BAD - animating layout properties
<div className="transition-all hover:ml-4">

// GOOD - use transform (GPU accelerated)
<div className="transition-transform hover:translate-x-4">

6. Follow 8px Grid System

Rule: Use spacing classes that are multiples of 8px. This is the industry gold standard (Material Design, Apple HIG).