Tailwind's Breakpoint System
Learn the five default breakpoints sm, md, lg, xl, 2xl and how Tailwind's mobile-first approach applies styles from small screens upward.
What Are Breakpoints?
A breakpoint is a specific viewport width at which your layout changes to better fit the available space. Below the breakpoint, you use one layout; above it, another. Tailwind's breakpoints are defined as minimum widths, following a mobile-first philosophy: unprefixed classes apply to all screen sizes, and breakpoint-prefixed classes override them at the specified width and above.
<!-- Mobile-first: unprefixed = mobile, md: = tablet+, lg: = desktop+ -->
<div class="text-sm md:text-base lg:text-lg">
Small text on mobile, base on tablet, large on desktop
</div>Tailwind's Five Default Breakpoints
Tailwind ships with five default responsive breakpoints. sm targets screens 640px and wider. md targets 768px and wider (typical tablet). lg targets 1024px and wider (laptop). xl targets 1280px and wider. 2xl targets 1536px and wider (large desktop). These values match common device dimensions and are easily customized in tailwind.config.js.
/*
Default Tailwind breakpoints:
sm: @media (min-width: 640px) — large phones, small tablets
md: @media (min-width: 768px) — tablets
lg: @media (min-width: 1024px) — small laptops
xl: @media (min-width: 1280px) — desktops
2xl: @media (min-width: 1536px) — large desktops
Usage: prefix any utility with sm:, md:, lg:, xl:, or 2xl:
*/
<div class="p-4 sm:p-6 md:p-8 lg:p-12">
Padding grows at each breakpoint
</div>All lessons in this course
- Tailwind's Breakpoint System
- Responsive Layouts With Flex and Grid
- Responsive Typography and Spacing
- Show and Hide Elements Responsively