Система контрольных точек Tailwind
Изучите пять стандартных контрольных точек — sm, md, lg, xl и 2xl — и узнайте, как мобильный подход Tailwind применяет стили от маленьких экранов к большим.
«Система контрольных точек Tailwind» — бесплатный урок Tailwind CSS Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Tailwind CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Tailwind CSS Academy содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
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.
Часто задаваемые вопросы
Урок «Система контрольных точек Tailwind» бесплатный?
Да — полный текст урока «Система контрольных точек Tailwind» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Tailwind CSS Academy, подпишись на CoddyKit PRO. Курс Tailwind CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Система контрольных точек Tailwind»?
Изучите пять стандартных контрольных точек — sm, md, lg, xl и 2xl — и узнайте, как мобильный подход Tailwind применяет стили от маленьких экранов к большим. Ты практикуешь Tailwind CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Tailwind CSS Academy?
Предыдущий опыт не требуется. Tailwind CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Система контрольных точек Tailwind»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Tailwind CSS Academy?
Да. Каждый урок Tailwind CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Система контрольных точек Tailwind
- Адаптивные макеты с Flex и Grid
- Адаптивная типографика и отступы
- Адаптивное отображение и скрытие элементов