Tailwind'in Kesme Noktası Sistemi
Varsayılan beş kesme noktası olan sm, md, lg, xl ve 2xl'yi ve Tailwind'in mobil öncelikli yaklaşımının stilleri küçük ekranlardan başlayarak nasıl uyguladığını öğrenin.
Tailwind'in Kesme Noktası Sistemi, CoddyKit'te ücretsiz bir Tailwind CSS Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Tailwind CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
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.
Sıkça Sorulan Sorular
“Tailwind'in Kesme Noktası Sistemi” dersi ücretsiz mi?
Evet — “Tailwind'in Kesme Noktası Sistemi” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Tailwind CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
“Tailwind'in Kesme Noktası Sistemi” dersinde ne öğreneceğim?
Varsayılan beş kesme noktası olan sm, md, lg, xl ve 2xl'yi ve Tailwind'in mobil öncelikli yaklaşımının stilleri küçük ekranlardan başlayarak nasıl uyguladığını öğrenin. Tailwind CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Tailwind CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Tailwind CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“Tailwind'in Kesme Noktası Sistemi” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Tailwind CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Tailwind CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Tailwind'in Kesme Noktası Sistemi
- Flex ve Izgarayla Duyarlı Düzenler
- Duyarlı Tipografi ve Boşluk
- Öğeleri Duyarlı Şekilde Gösterme ve Gizleme