Anpassade avståndsvärden

Tailwinds standardskala för avstånd omfattar värden från 0 till 96 (0 till 24 rem i steg om 0,25 rem för små värden och därefter större steg). Skalan används konsekvent i utilitetsklasser för marginal, utfyllnad, bredd, höjd, mellanrum och positionering. Värdena är utformade för att täcka de allra flesta behov av avstånd i användargränssnitt, men verkliga designer kräver ibland värden som ligger mellan eller utanför standardvärdena.

Designsystem kräver ofta avståndsvärden utanför standardskalan — värdet 128 (32 rem) för hero-sektioner över en hel sida, värdet 4.5 (18 px) för ett specifikt element som ligger mellan standardvärdena 4 (16 px) och 5 (20 px), eller värdet 13 för bredden på en specifik gridkolumn. I stället för att använda godtyckliga värden med hakparenteser varje gång kan ni lägga till dessa värden en gång i konfigurationen och ge dem ett tydligt namn för utilitetsklassen.

Lägg till anpassade avståndsvärden i theme.extend.spacing. Nyckeln blir suffixet i alla avståndsutiliteter och värdet är det CSS-mått ni vill använda. Använd strängnycklar för decimaltal eller stora tal så att de tolkas korrekt. När de har lagts till fungerar era anpassade avstånd automatiskt med m-*, p-*, w-*, h-*, gap-*, inset-* och alla andra avståndsutiliteter.

När anpassade avståndsvärden har lagts till använder ni dem precis som inbyggda avståndsutiliteter. Nyckeln placeras efter utilitetens prefix och bindestreck. Anpassade avstånd fungerar med responsiva prefix, mörkt läge och tillståndsvarianter på samma sätt som standardvärden. Eftersom de fungerar med flera utiliteter behöver konfigurationen bara skrivas en gång för att ni ska få utiliteter för utfyllnad, marginal, bredd, höjd och mellanrum från samma definition.

För projekt med strikta designsystem som endast får använda specifika avståndsvärden åsidosätter ni hela avståndsskalan genom att placera värdena direkt i theme.spacing (utanför extend). På så sätt kan ingen utvecklare av misstag använda ett avståndsvärde utanför den godkända uppsättningen. Var försiktig med denna metod — om Tailwinds standardvärden tas bort försvinner många vanligt förekommande utilitetsklasser.

Tailwind hanterar fraktionerade nycklar som '4.5' genom att generera utilitetsklasser med en CSS-säker version av decimaltecknet. Klassnamnet använder fraktionen som den skrevs: p-4.5, m-4.5. För nycklar med snedstreck (till exempel fraktioner för procentbaserade avstånd) kodas snedstrecket i CSS-selektorn. Ange alltid decimala nycklar och fraktionsnycklar inom citattecken som strängar i konfigurationsobjektet, så att JavaScript inte tolkar dem som numeriska literaler.

Tailwind genererar automatiskt negativa varianter för alla avståndsvärden, både standardvärden och anpassade värden. Om ni lägger till '128': '32rem' i avståndskonfigurationen får ni även -m-128, -mt-128, -inset-128 och så vidare. Negativa värden genereras automatiskt — ingen separat konfigurationspost behövs. De är särskilt användbara för överlappande element, citat som dras ut i marginalen och dekorativ positionering.

Ibland behöver ni avståndsvärden som skalas med textstorleken i stället för fasta rem-värden. Lägg till avståndsvärden med enheten em i konfigurationen — de blir då relativa till elementets egen teckensnittsstorlek. En knapp med utfyllnaden px-1.5em får till exempel proportionell horisontell utfyllnad oavsett om knapptexten är liten eller stor.

När designen bygger på ett 8-pixelsgridsystem (eller en basenhet på 4 pixlar) mappar ni hela gridet till avståndskonfigurationen. Ett 8-pixelsgrid innebär att alla avstånd är multiplar av 8 pixlar: 8, 16, 24, 32, 40, 48, 64, 80, 96, 128. Tailwinds standardskala följer redan detta (1 enhet = 4 pixlar, alltså 2 = 8 pixlar, 4 = 16 pixlar, 6 = 24 pixlar och 8 = 32 pixlar). Ni behöver kanske bara utöka den med värden över 96.

När ni behöver ett avståndsvärde som bara ska användas en gång och inte vill belasta konfigurationen använder ni Tailwinds syntax för godtyckliga värden med hakparenteser: p-[22px], w-[347px], mt-[3.75rem]. Detta genererar det exakta CSS-värdet utan att lägga till något i konfigurationen. Godtyckliga värden passar utmärkt för engångsöverskrivningar men bör inte bli en vana — om samma värde används tre gånger eller fler bör det i stället läggas till i konfigurationen.

När era anpassade avstånd växer bör ni dokumentera dem tillsammans med era färg- och typografitokens. Skapa en enkel visuell referens för avstånd i Storybook, i dokumentationen för designsystemet eller till och med på en statisk HTML-sida som visar varje avståndsvärde som ett färgat block. Det hjälper designers och utvecklare att använda rätt värde från konfigurationen i stället för att välja godtyckliga värden eller inkonsekventa engångslösningar.

I den här lektionen lärde Ni Er att lägga till anpassad spacing i theme.extend.spacing för att utöka standardskalan utan att ersätta den, att anpassad spacing automatiskt fungerar med alla spacing-utilities (padding, margin, width, height, gap), samt att godtyckliga värden med hakparenteser är ett bra alternativ för mått som verkligen bara används en gång. Härnäst utforskar vi CSS custom properties som designtokens i Tailwind.