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.
Tailwind's Breakpoint System is a free Tailwind CSS Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Tailwind CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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>Mobile-First Means No Prefix = Mobile
The most important thing to understand about Tailwind's breakpoint system is that the unprefixed class is the mobile baseline. text-sm applies on all screens including mobile. md:text-base then overrides it on screens 768px and wider. You never need to write a 'less-than-md' breakpoint — the unprefixed class handles everything below the first prefix you use.
<!-- Reading this correctly:
- text-sm: applies on ALL screens (mobile baseline)
- md:text-base: overrides at 768px+ (tablets and up)
- lg:text-lg: overrides at 1024px+ (laptops and up)
This is mobile-first: start small, add size at larger breakpoints -->
<p class="text-sm md:text-base lg:text-lg xl:text-xl leading-relaxed">
Responsive typography from mobile to desktop.
</p>Applying Breakpoint Prefixes
Breakpoint prefixes stack with other modifiers. The syntax is always {breakpoint}:{variant}:{property}-{value} when combining responsive with state variants. For example, md:hover:bg-blue-600 changes background to blue on hover, but only on medium screens and above. On small screens, hover would have no effect — useful for disabling hover effects on touch devices.
<!-- Breakpoint + hover combined -->
<button class="bg-blue-500 text-white px-4 py-2 rounded md:hover:bg-blue-700 transition-colors">
Hover only works on md+ screens
</button>
<!-- Breakpoint + focus combined -->
<input
type="text"
class="border rounded px-3 py-2 focus:ring-2 focus:ring-blue-500 md:focus:ring-4"
placeholder="Wider ring on desktop focus"
/>Breakpoint-Based Layouts
The most common application of breakpoints is changing layout direction: stacking on mobile, flowing side-by-side on desktop. flex flex-col md:flex-row stacks children vertically on mobile and lays them out horizontally on tablets and above. This pattern is the foundation of nearly every responsive page section.
<!-- Stack on mobile, horizontal on tablet+ -->
<div class="flex flex-col md:flex-row gap-6">
<div class="md:w-1/2 bg-blue-100 p-6 rounded-xl">
<h2 class="text-xl font-bold">Left Panel</h2>
<p class="text-gray-600 mt-2">Content stacks below on mobile.</p>
</div>
<div class="md:w-1/2 bg-indigo-100 p-6 rounded-xl">
<h2 class="text-xl font-bold">Right Panel</h2>
<p class="text-gray-600 mt-2">Sits side by side on md+ screens.</p>
</div>
</div>Responsive Grid Columns
Grid layouts naturally use breakpoints to increase column counts at wider viewports. The pattern grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gives a single-column stack on mobile, two columns on small tablets, and four columns on large screens. This is the standard approach for product grids, feature sections, and blog post listings that should adapt to viewport width.
<!-- Responsive product grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="bg-white border rounded-xl p-4 shadow-sm">
<div class="h-32 bg-gradient-to-br from-blue-400 to-indigo-600 rounded-lg mb-3"></div>
<h3 class="font-semibold">Product A</h3>
<p class="text-blue-600 font-bold mt-1">$29</p>
</div>
<div class="bg-white border rounded-xl p-4 shadow-sm">
<div class="h-32 bg-gradient-to-br from-pink-400 to-rose-600 rounded-lg mb-3"></div>
<h3 class="font-semibold">Product B</h3>
<p class="text-blue-600 font-bold mt-1">$39</p>
</div>
<div class="bg-white border rounded-xl p-4 shadow-sm">
<div class="h-32 bg-gradient-to-br from-emerald-400 to-teal-600 rounded-lg mb-3"></div>
<h3 class="font-semibold">Product C</h3>
<p class="text-blue-600 font-bold mt-1">$49</p>
</div>
<div class="bg-white border rounded-xl p-4 shadow-sm">
<div class="h-32 bg-gradient-to-br from-amber-400 to-orange-600 rounded-lg mb-3"></div>
<h3 class="font-semibold">Product D</h3>
<p class="text-blue-600 font-bold mt-1">$59</p>
</div>
</div>Targeting a Specific Range
Tailwind v3.2 introduced max-* breakpoint variants that apply a style only below the breakpoint (the opposite direction). max-md:hidden hides an element on screens smaller than 768px but shows it on md and above. Combining min and max variants allows you to target a specific range: sm:flex md:max-lg:hidden shows on sm, hides between md and lg.
<!-- max-* breakpoints for range targeting -->
<div class="space-y-2">
<!-- Only visible on mobile (below sm) -->
<div class="block sm:hidden bg-red-100 p-3 rounded">Mobile only</div>
<!-- Only visible on tablet (sm to lg) -->
<div class="hidden sm:block lg:hidden bg-yellow-100 p-3 rounded">Tablet only</div>
<!-- Only visible on desktop (lg+) -->
<div class="hidden lg:block bg-green-100 p-3 rounded">Desktop only</div>
</div>Custom Breakpoints in Config
The default breakpoints can be overridden or extended in tailwind.config.js. Adding a custom breakpoint like xs for very small phones at 480px, or a 3xl for ultra-wide monitors at 1920px, is straightforward. Use screens under theme.extend to add alongside defaults, or under theme to replace them entirely.
// tailwind.config.js — extending with custom breakpoints
module.exports = {
theme: {
extend: {
screens: {
'xs': '480px', // Extra small phones
'3xl': '1920px', // Ultra-wide monitors
}
}
}
}
// Usage after config:
// <div class="xs:text-base 3xl:text-2xl">Responsive Padding and Spacing
Spacing should scale with screen size. On mobile, a compact px-4 py-6 makes content readable. On desktop, lg:px-16 lg:py-24 gives breathing room. The typical pattern for a page section is px-4 sm:px-6 lg:px-8 for horizontal padding and py-10 md:py-16 lg:py-24 for vertical padding — tighter on mobile, more generous as space increases.
<!-- Responsive page section padding -->
<section class="px-4 sm:px-6 lg:px-8 py-10 md:py-16 lg:py-24">
<div class="max-w-7xl mx-auto">
<h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-center mb-6 lg:mb-12">
Our Features
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-10">
<div class="bg-white p-6 rounded-xl shadow-sm">Feature 1</div>
<div class="bg-white p-6 rounded-xl shadow-sm">Feature 2</div>
<div class="bg-white p-6 rounded-xl shadow-sm">Feature 3</div>
</div>
</div>
</section>Debugging Responsive Layouts
When debugging which breakpoint is active, you can use browser DevTools to resize the viewport or add a temporary responsive indicator. A quick debugging trick is adding a fixed banner that shows the current breakpoint using Tailwind's responsive hidden/block pattern: each breakpoint label is only visible at its own range. Remove these before shipping to production.
<!-- Debug banner: shows current active breakpoint -->
<div class="fixed top-0 left-0 right-0 bg-black text-white text-center text-xs py-1 z-50">
<span class="sm:hidden">XS (below 640px)</span>
<span class="hidden sm:inline md:hidden">SM (640-767px)</span>
<span class="hidden md:inline lg:hidden">MD (768-1023px)</span>
<span class="hidden lg:inline xl:hidden">LG (1024-1279px)</span>
<span class="hidden xl:inline 2xl:hidden">XL (1280-1535px)</span>
<span class="hidden 2xl:inline">2XL (1536px+)</span>
</div>Mobile-First Workflow in Practice
The practical mobile-first workflow: start by building the mobile layout with unprefixed utilities, test at 375px (iPhone), add sm: and md: overrides for tablet layouts, add lg: and xl: for desktop. Resize the browser progressively as you go rather than jumping straight to desktop. This workflow prevents forgetting mobile states, which is the most common responsive design mistake.
<!-- Workflow example: hero section, mobile-first -->
<section
class="
px-4 py-12
sm:px-6 sm:py-16
lg:px-8 lg:py-24
bg-gradient-to-br from-indigo-600 to-purple-700
"
>
<div class="max-w-4xl mx-auto text-center text-white">
<h1
class="
text-3xl font-bold leading-tight
sm:text-4xl
lg:text-5xl lg:leading-snug
"
>
Build Faster UIs
</h1>
<p class="mt-4 text-lg opacity-80 sm:text-xl lg:mt-6 max-w-2xl mx-auto">
Tailwind's responsive utilities help you design from mobile to desktop.
</p>
<button class="mt-6 lg:mt-8 bg-white text-indigo-700 px-8 py-3 rounded-full font-bold hover:shadow-lg transition-shadow">
Get Started
</button>
</div>
</section>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: Tailwind has five default breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px), and 2xl (1536px), mobile-first means unprefixed classes apply to all screens and breakpoint prefixes override upward, and max-* variants target ranges below a breakpoint for fine-grained control. Next up we explore building responsive layouts with flex and grid at different breakpoints.
Frequently asked questions
Is the “Tailwind's Breakpoint System” lesson free?
Yes — the full text of “Tailwind's Breakpoint System” is free to read here on the web, and the Tailwind CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Tailwind CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “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. You practise Tailwind CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Tailwind CSS Academy?
No prior experience is required. Tailwind CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Tailwind's Breakpoint System” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Tailwind CSS Academy lesson?
Yes. Every Tailwind CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Tailwind's Breakpoint System
- Responsive Layouts With Flex and Grid
- Responsive Typography and Spacing
- Show and Hide Elements Responsively