Tailwinds afstandsskala

En afstandsskala er et sæt foruddefinerede størrelsesværdier, der bruges konsekvent i et designsystem til marginer, padding, mellemrum, bredder og højder. I stedet for at bruge vilkårlige pixelværdier som 13px eller 17px vælger du blandt et kurateret sæt størrelser. Denne begrænsning skaber visuelt harmoniske designs, fordi alle afstandsværdier er multipla af en grundeenhed, hvilket skaber naturlig justering og rytme i hele brugergrænsefladen.

Tailwinds afstandsskala er baseret på en grundeenhed på 4 px (0.25rem). Hvert trinummer ganges med 0.25rem: spacing-1 = 4px, spacing-2 = 8px, spacing-4 = 16px, spacing-8 = 32px, spacing-16 = 64px. Skalaen går fra 0 til 96 (384px) og har brøkdele ved 0.5 (2px), 1.5 (6px), 2.5 (10px) og 3.5 (14px), så du får fin kontrol ved små størrelser.

Grundeenheden på 4 px er de facto-standarden i designsystemer til brugergrænseflader og bruges af Googles Material Design, Apples HIG og de fleste større designværktøjer. Designere og udviklere, der arbejder i det samme system, kan naturligt justere efter hinanden: Når en designer angiver 16px, svarer det direkte til Tailwinds 4 (4 × 4px = 16px). Dette fælles sprog fjerner oversættelsesfejl mellem designfiler og kode.

Den mest almindelige anvendelse af afstandsskalaen er padding. p-4 tilføjer 16 px padding på alle fire sider. Det er standardpadding til kompakte brugergrænsefladeelementer som mærkater og små kort. Til kort med god plads fungerer p-6 (24px) godt. Til rummelige sektionscontainere giver p-8 til p-12 god luft.

Den samme afstandsskala gælder for mange CSS-egenskaber ud over margin og padding. gap-4 tilføjer et mellemrum på 16 px mellem børn i flex- eller gitterlayout. w-8 indstiller en bredde på 32 px. h-16 indstiller en højde på 64 px. top-4 placerer et absolut positioneret element 16 px fra toppen. Den fælles skala betyder, at alle disse værdier automatisk flugter visuelt med hinanden.

Når du har brug for mindre justeringer end 4 px, giver Tailwinds brøkdele præcision uden vilkårlige værdier. p-0.5 (2px) er nyttig til tæt indvendig padding på små mærkater og mærkater. p-1.5 (6px) passer mellem kompakt og standardpadding. p-2.5 (10px) giver en lidt mere rummelig kompakt stil. Disse brøkdelstørrelser holder afstandene inden for designsystemet.

En nyttig mental model er: små interaktioner (ikoner, mærkater, input-padding) bruger 1–4 (4–16px). Afstande på komponentniveau (kortpadding, knap-padding, mellemrum mellem formularfelter) bruger 4–8 (16–32px). Afstande på sektionsniveau (sektionspadding, marginer omkring fremhævede områder) bruger 12–24 (48–96px). Afstande på sideniveau (padding i den overordnede container) bruger 24–32+ (96–128px).

Hvis du har brug for en værdi, der ikke findes i standardskalaen, kan du udvide den i tailwind.config.js under theme.extend.spacing. Hvis du tilføjer spacing['18'], oprettes et nyt trin på 72px, som kan bruges som p-18, m-18, w-18 osv. På den måde forbliver dine tilføjelser en del af designsystemet i stedet for at bruge vilkårlige værdier spredt ud over din HTML.

Til enkeltstående afstandsbehov, der ikke berettiger en post i konfigurationen, kan du bruge vilkårlige værdier: p-[13px] eller mt-[22px]. Vilkårlige værdier accepterer alle gyldige CSS-enheder for længde: px, rem, em, %, vw og vh. Brug dem sparsomt til pixelperfekte særtilfælde — for mange vilkårlige værdier modarbejder formålet med et designsystem. Hvis du bruger den samme vilkårlige værdi mere end to gange, bør du i stedet føje den til konfigurationen.

En af de største fordele ved at bruge en foruddefineret afstandsskala er ensartethed i teamet. Når alle udviklere på et projekt bruger Tailwinds afstandsklasser, flugter hvert element naturligt med alle andre elementer. Der er ikke længere diskussioner om, hvorvidt du skal bruge 14px eller 16px — du bruger skalaen. Kodegennemgange bliver lettere, fordi enhver værdi uden for standardtrinnene straks er synlig og kan sættes spørgsmålstegn ved.

Afstandsskalaen fungerer problemfrit sammen med responsive præfikser. Du kan anvende forskellige afstande ved forskellige brudpunkter: px-4 md:px-8 lg:px-16 giver en sidecontainer, hvis padding fordobles ved hvert større brudpunkt. Dette skaleringsmønster afspejler, hvordan professionelle designs normalt håndterer tom plads — mobilen er kompakt, mens computervisningen er rummelig.

I denne lektion lærte du: Tailwinds afstandsskala er baseret på trin på 4 px (0.25rem), nummereret fra 0 til 96, brøkdele som 0.5, 1.5 og 2.5 giver fin kontrol ved små størrelser, og den samme skala anvendes ensartet til hjælpeklasser for padding, margin, mellemrum, bredde og højde. Næste gang lærer du padding-hjælpeklasserne og alle deres retningsvarianter grundigt at kende.