Responsive Mobile-First

Breakpoint Strategy

// Tailwind default breakpoints (mobile-first)
// sm: 640px
// md: 768px
// lg: 1024px
// xl: 1280px
// 2xl: 1536px

// Write base styles for mobile, add breakpoints for larger screens
<div className="
  px-4 md:px-6 lg:px-8        // Padding increases
  text-sm md:text-base         // Font size scales
  grid-cols-1 md:grid-cols-2   // Grid expands
">