Le système de points de rupture de Tailwind
Découvrez les cinq points de rupture par défaut, sm, md, lg, xl et 2xl, ainsi que l’approche mobile-first de Tailwind, qui applique les styles des petits écrans vers les plus grands.
Le système de points de rupture de Tailwind est une leçon Tailwind CSS Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Tailwind CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Tailwind CSS Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
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.
Questions Fréquemment Posées
La leçon « Le système de points de rupture de Tailwind » est-elle gratuite ?
Oui — le texte complet de « Le système de points de rupture de Tailwind » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Tailwind CSS Academy, passe à CoddyKit PRO. Le cours Tailwind CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Le système de points de rupture de Tailwind » ?
Découvrez les cinq points de rupture par défaut, sm, md, lg, xl et 2xl, ainsi que l’approche mobile-first de Tailwind, qui applique les styles des petits écrans vers les plus grands. Tu pratiques Tailwind CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Tailwind CSS Academy ?
Aucune expérience préalable n'est requise. Tailwind CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Le système de points de rupture de Tailwind » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Tailwind CSS Academy ?
Oui. Chaque leçon Tailwind CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Le système de points de rupture de Tailwind
- Dispositions réactives avec Flex et Grid
- Typographie et espacement réactifs
- Afficher et masquer les éléments de manière réactive