Breakpoints are the screen sizes where your layout changes. Tailwind's default breakpoints are carefully chosen to match common device widths. You can use them as prefixes on any utility class.
Default breakpoints
sm: 640px — Large phones, landscape
md: 768px — Tablets, small laptops
lg: 1024px — Laptops, small desktops
xl: 1280px — Desktops
2xl: 1536px — Large screens
The pattern: base styles (no prefix) target mobile. sm: and up for tablets. md: and up for laptops. lg: and up for desktops.
Custom breakpoints
Add your own breakpoints in tailwind.config.js to match your specific design needs.
// tailwind.config.js
module.exports = {
theme: {
screens: {
'xs': '475px',
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',
'3xl': '1800px',
},
},
}
Breakpoint prefixes in action
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="p-4 bg-blue-100">Always 1 col on mobile</div>
<div class="p-4 bg-blue-200">2 cols on tablet</div>
<div class="p-4 bg-blue-300">4 cols on desktop</div>
<div class="p-4 bg-blue-400">Responsive card</div>
</div>
Testing your breakpoints
Use your browser's dev tools to resize the window and watch the layout change at each breakpoint. In Chrome, press F12 and click the device toolbar icon. This lets you test every screen size without leaving your browser.