Part 36: Standard Breakpoints: sm, md, lg, xl & 2xl
Tailwind provides five standard responsive breakpoints:
1. The Breakpoint Table
| Prefix | Min-Width | Target Device | CSS Media Query |
|---|---|---|---|
| (none) | 0px |
Phones (portrait) | Default styles |
sm: |
640px |
Large phones & small tablets | @media (min-width: 640px) |
md: |
768px |
Tablets & iPads | @media (min-width: 768px) |
lg: |
1024px |
Laptops & Small Desktops | @media (min-width: 1024px) |
xl: |
1280px |
Standard Desktops | @media (min-width: 1280px) |
2xl: |
1536px |
Large High-Res Monitors | @media (min-width: 1536px) |
2. Practical Example: Responsive Hero Section
<div class="p-6 sm:p-10 lg:p-16 text-center lg:text-left flex flex-col lg:flex-row items-center gap-8">
<div class="flex-1">
<h1 class="text-3xl sm:text-4xl lg:text-6xl font-extrabold text-slate-900">
Supercharge Your Web Apps
</h1>
</div>
</div>
Key Takeaways
- Use standard breakpoints to craft adaptive layouts.
md(768px) andlg(1024px) are the most frequently used desktop thresholds.
In Part 37, we will explore Custom Breakpoints and Container Queries!