Tailwinds breakpoint-system
Lær om de fem standard-breakpointene sm, md, lg, xl og 2xl, og hvordan Tailwinds mobile-first-tilnærming bruker stiler fra små skjermer og oppover.
Tailwinds breakpoint-system er en gratis leksjon i Tailwind CSS Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Tailwind CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Tailwind CSS Academy inneholder totalt 4 leksjoner.
Hva er bruddpunkter?
Et bruddpunkt er en bestemt bredde på visningsområdet der oppsettet endres for å passe bedre til den tilgjengelige plassen. Under bruddpunktet bruker du ett oppsett, og over det bruker du et annet. Tailwinds bruddpunkter er definert som minimumsbredder og følger en mobile-first-filosofi: klasser uten prefiks gjelder for alle skjermstørrelser, mens klasser med bruddpunktprefiks overstyrer dem ved den angitte bredden og oppover.
<!-- 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>Tailwinds fem standardbruddpunkter
Tailwind leveres med fem standardiserte responsive bruddpunkter. sm gjelder skjermer på 640px og bredere. md gjelder skjermer på 768px og bredere (vanlig nettbrettstørrelse). lg gjelder skjermer på 1024px og bredere (bærbar PC). xl gjelder skjermer på 1280px og bredere. 2xl gjelder skjermer på 1536px og bredere (stor stasjonær skjerm). Disse verdiene samsvarer med vanlige enhetsdimensjoner og kan enkelt tilpasses i 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 betyr at ingen prefiks = mobil
Det viktigste å forstå om Tailwinds bruddpunktssystem er at klassen uten prefiks er grunnlaget for mobil. text-sm gjelder på alle skjermer, også mobil. md:text-base overstyrer den deretter på skjermer med bredde 768px eller mer. Du trenger aldri å skrive et bruddpunkt for «mindre enn md» – klassen uten prefiks håndterer alt under det første prefikset du bruker.
<!-- 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>Bruk av bruddpunktprefikser
Bruddpunktprefikser kan kombineres med andre modifikatorer. Syntaksen er alltid {breakpoint}:{variant}:{property}-{value} når du kombinerer responsivitet med tilstandsvarianter. For eksempel endrer md:hover:bg-blue-600 bakgrunnen til blå ved markøroverføring, men bare på mellomstore skjermer og større. På små skjermer har markøroverføring ingen effekt – noe som er nyttig for å deaktivere slike effekter på berøringsenheter.
<!-- 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"
/>Oppsett basert på bruddpunkter
Den vanligste bruken av bruddpunkter er å endre retningen på oppsettet: stable elementene på mobil og plasser dem side ved side på stasjonære skjermer. flex flex-col md:flex-row stabler underordnede elementer loddrett på mobil og legger dem vannrett på nettbrett og større skjermer. Dette mønsteret danner grunnlaget for nesten alle responsive seksjoner på nettsider.
<!-- 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-kolonner
Grid-oppsett bruker naturlig bruddpunkter for å øke antallet kolonner på bredere visningsområder. Mønsteret grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gir én kolonne på mobil, to kolonner på små nettbrett og fire kolonner på store skjermer. Dette er den vanlige fremgangsmåten for produktgrider, funksjonsseksjoner og lister over blogginnlegg som skal tilpasses bredden på visningsområdet.
<!-- 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>Målretting av et bestemt område
Tailwind v3.2 introduserte max-*-bruddpunktvarianter, som bare gjelder under bruddpunktet (motsatt retning). max-md:hidden skjuler et element på skjermer som er smalere enn 768px, men viser det på md og større. Ved å kombinere min- og maksvarianter kan du målrette et bestemt område: sm:flex md:max-lg:hidden viser elementet på sm og skjuler det mellom md og 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>Egendefinerte bruddpunkter i konfigurasjonen
Standardbruddpunktene kan overstyres eller utvides i tailwind.config.js. Det er enkelt å legge til et egendefinert bruddpunkt som xs for svært små telefoner ved 480px, eller 3xl for ultrabrede skjermer ved 1920px. Bruk screens under theme.extend for å legge til bruddpunkter ved siden av standardverdiene, eller under theme for å erstatte dem fullstendig.
// 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">Responsiv padding og avstand
Avstanden bør skaleres etter skjermstørrelsen. På mobil gjør en kompakt px-4 py-6 innholdet lett å lese. På stasjonære skjermer gir lg:px-16 lg:py-24 mer luft. Det typiske mønsteret for en sideseksjon er px-4 sm:px-6 lg:px-8 for vannrett padding og py-10 md:py-16 lg:py-24 for loddrett padding – tettere på mobil og romsligere når det blir mer plass.
<!-- 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>Feilsøking av responsive oppsett
Når du feilsøker hvilket bruddpunkt som er aktivt, kan du bruke nettleserens DevTools til å endre bredden på visningsområdet eller legge til en midlertidig responsiv indikator. Et raskt feilsøkingstriks er å legge til et fast banner som viser det gjeldende bruddpunktet ved hjelp av Tailwinds responsive mønster med skjuling og visning: hver bruddpunktetikett er bare synlig i sitt eget område. Fjern dette før du publiserer til produksjon.
<!-- 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-arbeidsflyt i praksis
Den praktiske mobile-first-arbeidsflyten er: start med å bygge mobiloppsettet ved hjelp av verktøyklasser uten prefiks, test ved 375px (iPhone), legg til sm:- og md:-overstyringer for nettbrettoppsett, og legg til lg: og xl: for stasjonære skjermer. Endre størrelsen på nettleseren trinnvis underveis i stedet for å hoppe rett til stasjonær visning. Denne arbeidsflyten hindrer at du glemmer mobiltilstander, som er den vanligste feilen i responsiv utforming.
<!-- 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>Kort test
Test forståelsen din av konseptene i Tailwind CSS Mastery fra denne leksjonen.
Oppsummering av leksjonen
I denne leksjonen lærte du: Tailwind har fem standardbruddpunkter: sm (640px), md (768px), lg (1024px), xl (1280px) og 2xl (1536px), mobile-first betyr at klasser uten prefiks gjelder for alle skjermer, og at bruddpunktprefikser overstyrer dem oppover, og max-*-varianter målretter områder under et bruddpunkt for mer presis kontroll. Neste tema er å bygge responsive oppsett med flex og grid ved ulike bruddpunkter.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «Tailwinds breakpoint-system» gratis?
Ja – hele teksten i «Tailwinds breakpoint-system» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Tailwind CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Tailwind CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Tailwinds breakpoint-system»?
Lær om de fem standard-breakpointene sm, md, lg, xl og 2xl, og hvordan Tailwinds mobile-first-tilnærming bruker stiler fra små skjermer og oppover. Du øver på Tailwind CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Tailwind CSS Academy?
Ingen tidligere erfaring er nødvendig. Tailwind CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «Tailwinds breakpoint-system»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Tailwind CSS Academy-leksjonen?
Ja. Alle Tailwind CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Tailwinds breakpoint-system
- Responsive oppsett med flex og grid
- Responsiv typografi og avstand
- Vise og skjule elementer responsivt