Il sistema di breakpoint di Tailwind
Impari a usare i cinque breakpoint predefiniti sm, md, lg, xl e 2xl e comprenda come l’approccio mobile-first di Tailwind applichi gli stili a partire dagli schermi più piccoli.
Il sistema di breakpoint di Tailwind è una lezione Tailwind CSS Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Tailwind CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Tailwind CSS Academy include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
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.
Domande Frequenti
La lezione «Il sistema di breakpoint di Tailwind» è gratuita?
Sì — il testo completo di «Il sistema di breakpoint di Tailwind» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Tailwind CSS Academy, passa a CoddyKit PRO. Il corso Tailwind CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Il sistema di breakpoint di Tailwind»?
Impari a usare i cinque breakpoint predefiniti sm, md, lg, xl e 2xl e comprenda come l’approccio mobile-first di Tailwind applichi gli stili a partire dagli schermi più piccoli. Eserciti Tailwind CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Tailwind CSS Academy?
Non è richiesta alcuna esperienza precedente. Tailwind CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Il sistema di breakpoint di Tailwind»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Tailwind CSS Academy?
Sì. Ogni lezione Tailwind CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Il sistema di breakpoint di Tailwind
- Layout responsivi con Flexbox e Grid
- Tipografia e spaziatura responsiva
- Mostrare e nascondere gli elementi in modo responsivo