tailwind

Tailwind CSS Best Practices

Overview

Aspect	Recommendation
Version	Tailwind CSS v4 (2025)
Config	tailwind.config.ts
Approach	Utility-first, extract components when repeated

---

Class Organization

Recommended Order

// Order: Layout → Spacing → Sizing → Typography → Colors → Effects → States
<div className="
  flex items-center justify-between     // Layout
  p-4 gap-4                             // Spacing
  w-full max-w-md                       // Sizing
  text-sm font-medium                   // Typography
  text-gray-900 bg-white                // Colors
  rounded-lg shadow-md                  // Effects
  hover:bg-gray-50 focus:ring-2         // States
"/>

Group Related Utilities

// ✅ Good - grouped logically
<button className="
  px-4 py-2 
  text-sm font-semibold text-white 
  bg-blue-600 rounded-lg 
  hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500
">
  Click me
</button>

// ❌ Bad - random order
<button className="bg-blue-600 text-sm px-4 rounded-lg py-2 font-semibold hover:bg-blue-700 text-white focus:ring-2">
  Click me
</button>

---

Responsive Design

Mobile-First Approach

// Start with mobile, add breakpoints for larger screens
<div className="
  grid grid-cols-1        // Mobile: 1 column
  md:grid-cols-2          // Tablet: 2 columns
  lg:grid-cols-3          // Desktop: 3 columns
  xl:grid-cols-4          // Large desktop: 4 columns
  gap-4
">
  {items.map(item => <Card key={item.id} />)}
</div>

Breakpoint Reference

Breakpoint	Min-width	Use case
sm:	640px	Large phones
md:	768px	Tablets
lg:	1024px	Laptops
xl:	1280px	Desktops
2xl:	1536px	Large screens

---

Component Patterns

Button Variants

// Base button styles
const buttonBase = "inline-flex items-center justify-center rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none"

// Variants
const variants = {
  primary: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",
  secondary: "bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-500",
  destructive: "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500",
  ghost: "hover:bg-gray-100 text-gray-700",
}

// Sizes
const sizes = {
  sm: "h-8 px-3 text-sm",
  md: "h-10 px-4 text-sm",
  lg: "h-12 px-6 text-base",
}