Brugerdefinerede afstandsværdier

Tailwinds standardskala for afstand dækker værdier fra 0 til 96 (0 til 24 rem i trin på 0,25 rem for små værdier og derefter større trin). Denne skala bruges konsekvent i hjælpeklasser til margen, indvendig afstand, bredde, højde, mellemrum og placering. Værdierne er designet til at dække langt de fleste behov for afstande i brugerflader, men design fra virkeligheden kræver nogle gange værdier, der ligger mellem eller uden for standardværdierne.

Designsystemer kræver ofte afstandsværdier uden for standardskalaen — en 128-værdi (32 rem) til helsides hero-sektioner, en 4.5-værdi (18 px) til et bestemt element, der ligger mellem standardværdierne 4 (16 px) og 5 (20 px), eller en 13-værdi til bredden på en bestemt gitterkolonne. I stedet for at bruge vilkårlige værdier med kantet parentesnotation hver gang kan du tilføje disse værdier én gang i konfigurationen og give dem et tydeligt navn til hjælpeklassen.

Tilføj brugerdefinerede afstandsværdier i theme.extend.spacing. Nøglen bliver suffikset i alle hjælpeklasser til afstand, og værdien er det CSS-mål, du ønsker. Brug strengnøgler til decimaltal eller store tal for at sikre, at de fortolkes korrekt. Når de er tilføjet, fungerer dine brugerdefinerede afstande automatisk med m-*, p-*, w-*, h-*, gap-*, inset-* og alle andre hjælpeklasser til afstand.

Når du har tilføjet brugerdefinerede afstandsværdier, skal du bruge dem på samme måde som indbyggede hjælpeklasser til afstand. Nøglen placeres efter hjælpeklassens præfiks og bindestreg. Brugerdefinerede afstande fungerer med responsive præfikser, mørk tilstand og tilstandsvarianter ligesom standardværdierne. Fordi de kan bruges på tværs af hjælpeklasser, skriver du konfigurationen én gang og får hjælpeklasser til indvendig afstand, margen, bredde, højde og mellemrum fra den samme definition.

I projekter med strenge designsystemer, der kun må bruge bestemte afstandsværdier, kan du tilsidesætte hele afstandsskalaen ved at placere dine værdier direkte i theme.spacing (uden for extend). Det sikrer, at ingen udvikler ved et uheld bruger en afstandsværdi uden for det godkendte sæt. Vær forsigtig med denne fremgangsmåde — hvis du fjerner Tailwinds standardværdier, forsvinder mange almindeligt nødvendige hjælpeklasser.

Tailwind håndterer brøgnøgler som '4.5' ved at generere hjælpeklasser med en CSS-sikker version af decimaltallet. Klassenavnet bruger brøken, som den er skrevet: p-4.5, m-4.5. For nøgler med skråstreger (som brøker til procentbaserede afstande) kodes skråstregen i CSS-selektoren. Sæt altid decimaltals- og brøgnøgler i anførselstegn som strenge i konfigurationsobjektet, så JavaScript ikke fortolker dem som numeriske literaler.

Tailwind genererer automatisk negative varianter for alle afstandsværdier, både standardværdier og brugerdefinerede værdier. Hvis du tilføjer '128': '32rem' i din afstandskonfiguration, får du også -m-128, -mt-128, -inset-128 osv. Negative værdier genereres automatisk — der kræves ingen separat konfigurationspost. De er især nyttige til overlappende elementer, fremhævede citater og dekorativ placering.

Nogle gange vil du have afstandsværdier, der skalerer med tekstens størrelse i stedet for at være faste rem-værdier. Tilføj afstandsværdier med enhederne em i konfigurationen — de vil være relative til elementets egen skriftstørrelse. En knap med indvendig afstand på px-1.5em vil for eksempel have en proportionel vandret indvendig afstand, uanset om knappens tekst er lille eller stor.

Når dit design er baseret på et 8 px-gittersystem (eller en basisenhed på 4 px), skal du afspejle hele gitteret i din afstandskonfiguration. Et 8 px-gitter betyder, at alle afstande er multipla af 8 px: 8, 16, 24, 32, 40, 48, 64, 80, 96, 128. Tailwinds standardskala for afstand stemmer allerede overens med dette (1 enhed = 4 px, så 2 = 8 px, 4 = 16 px, 6 = 24 px og 8 = 32 px). Du behøver måske kun at udvide med værdier over 96.

Når du har brug for en enkeltstående afstandsværdi og ikke vil overfylde din konfiguration, kan du bruge Tailwinds syntaks for vilkårlige værdier med kantede parenteser: p-[22px], w-[347px], mt-[3.75rem]. Det genererer den nøjagtige CSS-værdi uden at føje noget til konfigurationen. Vilkårlige værdier er ideelle til engangsjusteringer, men bør ikke blive en vane — hvis du bruger den samme værdi tre eller flere gange, skal du i stedet føje den til konfigurationen.

Efterhånden som dine brugerdefinerede afstande vokser, skal du dokumentere dem sammen med dine farve- og typografiværdier. Opret en enkel visuel reference for afstande i din Storybook, i dokumentationen til dit designsystem eller endda på en statisk HTML-side, der viser hver afstandsværdi som en farvet blok. Det hjælper designere og udviklere med at bruge den rigtige værdi fra konfigurationen i stedet for at ty til vilkårlige værdier eller inkonsekvente engangsløsninger.

I denne lektion lærte du: Tilføj brugerdefineret afstand i theme.extend.spacing for at udvide standardskalaen uden at erstatte den. Brugerdefineret afstand fungerer automatisk på tværs af alle afstandsværktøjer (indvendig margen, udvendig margen, bredde, højde og mellemrum), og vilkårlige værdier med kantparenteser er et godt alternativ til målinger, der kun bruges ét enkelt sted. Næste emne er CSS-brugerdefinerede egenskaber som designtokens i Tailwind.