Responsive Breakpoints (sm, md, lg, xl, 2xl)

Apply mobile-first responsive classes using sm: (640px), md: (768px), lg: (1024px), xl: (1280px), and 2xl: (1536px).

Mobile-First Breakpoints

<!-- Stacks on mobile, splits 2-cols on tablet, 4-cols on desktop -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
    <div class="p-4 bg-slate-900 rounded-xl">Item 1</div>
    <div class="p-4 bg-slate-900 rounded-xl">Item 2</div>
    <div class="p-4 bg-slate-900 rounded-xl">Item 3</div>
    <div class="p-4 bg-slate-900 rounded-xl">Item 4</div>
</div>

Previous Order & Alignment in Tailwind CSS Grid

Next Lesson Dark Mode Theming (`dark:` modifier)