Tailwinds avståndsskala

En skala för mellanrum är en uppsättning fördefinierade storleksvärden som används konsekvent i ett designsystem för marginaler, utfyllnad, mellanrum, bredder och höjder. I stället för att använda godtyckliga pixelvärden som 13px eller 17px väljer Ni bland ett utvalt antal storlekar. Denna begränsning ger visuellt harmoniska designer eftersom alla mellanrumsvärden är multiplar av en basenhet, vilket skapar naturlig justering och rytm i hela gränssnittet.

Tailwinds skala för mellanrum bygger på en basenhet på 4 px (0,25 rem). Varje stegnummer multipliceras med 0,25 rem: spacing-1 = 4 px, spacing-2 = 8 px, spacing-4 = 16 px, spacing-8 = 32 px, spacing-16 = 64 px. Skalan sträcker sig från 0 till 96 (384 px), med bråksteg vid 0,5 (2 px), 1,5 (6 px), 2,5 (10 px) och 3,5 (14 px) för finjustering vid små storlekar.

Basenheten på 4 px är de facto-standard i designsystem för gränssnitt och används av Googles Material Design, Apples HIG och de flesta större designverktyg. Designers och utvecklare som arbetar i samma system kan naturligt justera mot varandra: när en designer anger 16px motsvarar det direkt Tailwinds 4 (4 × 4 px = 16 px). Detta gemensamma språk eliminerar översättningsfel mellan designfiler och kod.

Det vanligaste användningsområdet för skalan för mellanrum är utfyllnad. p-4 lägger till 16 px utfyllnad på alla fyra sidor. Det är standardutfyllnad för kompakta gränssnittselement som märken och små kort. För bekväma kort fungerar p-6 (24 px) bra. För luftiga sektionsbehållare ger p-8 till p-12 generöst med utrymme.

Samma skala för mellanrum gäller för många CSS-egenskaper utöver marginaler och utfyllnad. gap-4 lägger till ett mellanrum på 16 px mellan barn i flex- eller gridlayouter. w-8 anger en bredd på 32 px. h-16 anger en höjd på 64 px. top-4 placerar ett absolut positionerat element 16 px från överkanten. Den enhetliga skalan gör att alla dessa värden automatiskt linjerar visuellt med varandra.

När Ni behöver mindre justeringar än 4 px ger Tailwinds bråksteg precision utan godtyckliga värden. p-0.5 (2 px) är användbart för tät inre utfyllnad i små taggar och märken. p-1.5 (6 px) passar mellan kompakt och standardiserad utfyllnad. p-2.5 (10 px) ger en något luftigare kompakt känsla. Dessa bråkstorlekar håller mellanrummen inom designsystemet.

En användbar mental modell är: små interaktioner (ikoner, märken, utfyllnad i inmatningsfält) använder 1–4 (4–16 px). Mellanrum på komponentnivå (kortutfyllnad, knapputfyllnad, mellanrum mellan formulärfält) använder 4–8 (16–32 px). Mellanrum på sektionsnivå (sektionsutfyllnad, hero-marginaler) använder 12–24 (48–96 px). Mellanrum på sidnivå (utfyllnad i överordnade behållare) använder 24–32+ (96–128 px).

Om Ni behöver ett värde som inte finns i standardskalan kan Ni utöka den i tailwind.config.js under theme.extend.spacing. Om Ni lägger till spacing['18'] skapas ett nytt steg på 72px som kan användas som p-18, m-18, w-18 och så vidare. På så sätt hålls tilläggen inom designsystemet i stället för att godtyckliga värden sprids i HTML-koden.

För enstaka behov av mellanrum som inte motiverar en post i konfigurationen kan Ni använda godtyckliga värden: p-[13px] eller mt-[22px]. Godtyckliga värden accepterar alla giltiga CSS-enheter för längd: px, rem, em, %, vw och vh. Använd dem sparsamt för pixelperfekta specialfall – för många godtyckliga värden motverkar syftet med ett designsystem. Om Ni använder samma godtyckliga värde mer än två gånger bör Ni i stället lägga till det i konfigurationen.

En av de största fördelarna med att använda en fördefinierad skala för mellanrum är konsekvens i teamet. När alla utvecklare i ett projekt använder Tailwinds klasser för mellanrum linjerar varje element naturligt med alla andra element. Diskussioner om huruvida Ni ska använda 14px eller 16px försvinner – Ni använder skalan. Kodgranskningar blir enklare eftersom alla värden utanför standardstegen syns direkt och kan ifrågasättas.

Skalan för mellanrum fungerar smidigt tillsammans med responsiva prefix. Ni kan tillämpa olika mellanrum vid olika brytpunkter: px-4 md:px-8 lg:px-16 ger en sidbehållare vars utfyllnad fördubblas vid varje större brytpunkt. Detta skalningsmönster motsvarar hur professionella designer vanligtvis hanterar tomrum – mobilläget är kompakt och datorläget luftigt.

I den här lektionen har Ni lärt Er att: Tailwinds skala för mellanrum bygger på steg om 4 px (0,25 rem) numrerade från 0 till 96, bråksteg som 0,5, 1,5 och 2,5 ger finjustering vid små storlekar och samma skala används enhetligt för verktyg för utfyllnad, marginal, mellanrum, bredd och höjd. Nästa steg är att lära oss verktygen för utfyllnad och alla deras riktade varianter.