Arbitrære værdier og deres omkostning

Tailwinds syntaks for vilkårlige værdier lader dig bruge enhver CSS-værdi direkte i et klassenavn ved hjælp af kantet parentes-notation. I stedet for at være begrænset til Tailwinds foruddefinerede skala kan du skrive w-[347px], text-[#1a2b3c] eller grid-cols-[1fr_2fr_1fr].

Denne funktion, som aktiveres af JIT-motoren, er en af Tailwinds mest kraftfulde muligheder. Den bygger bro mellem hjælpeklasser og de sjældne tilfælde, hvor der virkelig er brug for en præcis værdi uden for skalaen.

Syntaksen med kantede parenteser fungerer med ethvert præfiks til et Tailwind-hjælpeværktøj. Værdien i parenteserne indsættes direkte som CSS-værdi. Mellemrum i værdien repræsenteres med underscore (Tailwind erstatter dem før parsing).

For hjælpeværktøjer, der genererer flere CSS-egenskaber, modtager kun den relevante egenskab den vilkårlige værdi. p-[12px] angiver for eksempel alle fire padding-værdier til 12 px, ligesom p-4, men med en tilpasset værdi.

Vilkårlige værdier er passende i bestemte situationer:

• Præcis placering: Et tooltip, der skal justeres nøjagtigt efter et referencepunkt (top-[3px])
• Eksterne begrænsninger: Tilpasning til højden eller kantradius på en tredjepartskomponent
• Unikke brandfarver: En brandfarve, der ikke passer godt ind i Tailwind-paletten (bg-[#e63946])
• Dynamiske CSS-udtryk: Værdier med calc, min, max eller clamp

De er IKKE passende til værdier, der hører hjemme i designsystemet — brug en temaudvidelse til dem.

Når en værdi bruges flere steder i dit projekt, hører den hjemme i temaudvidelsen og ikke som en vilkårlig værdi. Når du føjer den til temaet, får den et semantisk navn, bliver konsistent og kan ændres ét sted.

En god tommelfingerregel er: Hvis du bruger en vilkårlig værdi to gange i forskellige filer, skal du flytte den til temaet. Hvis den kun forekommer én gang i en meget specifik sammenhæng, er den vilkårlige værdi fin.

Hver unik vilkårlig værdi genererer en unik CSS-regel. Fem forekomster af w-[347px] i den samme fil genererer kun én CSS-regel (JIT fjerner dubletter). Men w-[347px], w-[348px] og w-[349px] i forskellige komponenter genererer hver sin regel — tre separate regler for værdier, der kun adskiller sig med én pixel.

Det er omkostningen ved vilkårlige værdier: De kan modvirke den CSS-genbrug, der gør hjælpeklasser effektive. Ti lidt forskellige vilkårlige bredder genererer ti separate regler i stedet for ét delt hjælpeværktøj.

Ud over præfikser til hjælpeværktøjer understøtter Tailwinds JIT også vilkårlige CSS-egenskaber med syntaksen [property:value] — en kantet parentes, der indeholder både et CSS-egenskabsnavn og en værdi adskilt af et kolon.

Det er en nødløsning til CSS-egenskaber, som Tailwind ikke har et hjælpeværktøj til, for eksempel [mask-image:linear-gradient(...)], [scroll-snap-type:x_mandatory] eller leverandørspecifikke egenskaber. Brug det sparsomt — hvis du opdager, at du bruger mange vilkårlige egenskaber, bør du i stedet overveje at tilføje et Tailwind-plugin.

Vilkårlige værdier kan kombineres fuldt ud med alle variantpræfikser. Du kan kombinere responsive varianter, hover, focus, dark og andre varianter med enhver vilkårlig værdi — på samme måde som standardhjælpeværktøjer.

Det giver dig hele Tailwinds variantsystem til tilpassede værdier. En tilpasset hover-farve uden for skalaen, en responsiv tilpasset bredde eller en vilkårlig farveværdi i dark mode fungerer alt sammen problemfrit.

Når du bruger vilkårlige hex-farver, kan du også anvende opacitetsmodifikatoren med en skråstreg: bg-[#e63946]/50 angiver baggrunden med 50 % opacitet. Det fungerer, fordi syntaksen for opacitet med skråstreg er en JIT-funktion, der gælder, uanset om grundfarven kommer fra paletten eller er en vilkårlig værdi.

Du kan også bruge funktionerne rgba() eller hsl() direkte i parenteserne for at styre vilkårlig opacitet eller farvemodel.

Nogle tegn i vilkårlige værdier skal escapes, fordi de har en betydning i CSS eller HTML. I Tailwinds vilkårlige værdier skal du bruge underscores til mellemrum (Tailwind konverterer dem automatisk) og escape parenteser og andre specialtegn i calc() ved at bruge underscores til mellemrum i funktionen.

For URL-værdier (f.eks. baggrundsbilleder) skal du omslutte værdien med enkelte anførselstegn: bg-[url('/img/hero.png')]. Tailwind bevarer de enkelte anførselstegn i den genererede CSS.

Søg med jævne mellemrum i din kodebase efter alle forekomster af vilkårlige værdier for at finde kandidater til at blive flyttet til temaet. En hurtig grep-søgning finder alle klasser med kantede parenteser i dit projekt:

Enhver værdi, der forekommer mere end to gange i forskellige filer, er en oplagt kandidat til et navngivet temaledd. En værdi, der forekommer én gang, er fin som vilkårlig værdi. Værdier, der ser ud til at høre til i en konsistent skala (som w-[350px], w-[360px], w-[370px]), viser, at et mønster med værdier uden for skalaen bør standardiseres.

Vilkårlige værdier kan naturligt kombineres med standardklasser til hjælpeværktøjer i den samme klassestreng. Du kan frit blande hjælpeværktøjer fra skalaen og vilkårlige værdier — det er tilsigtet og ikke en nødløsning. Designsystmet håndterer 95 % af tilfældene med hjælpeværktøjer fra skalaen; vilkårlige værdier dækker de resterende 5 %.

Den vigtigste disciplin er at bruge hjælpeværktøjer fra skalaen først og kun ty til vilkårlige værdier, når skalaen reelt ikke indeholder det, du har brug for. Håndhæv denne disciplin i kodegennemgange, så din markup ikke bliver en samling af vilkårlige værdier uden for skalaen.

I denne lektion lærte du, at vilkårlige værdier bruger syntaksen med kantede parenteser [value] til at angive enhver CSS-værdi på ethvert hjælpeværktøj ved hjælp af JITs generering efter behov; at hver unik vilkårlig værdi genererer en unik CSS-regel, så gentagne værdier uden for skalaen på tværs af filer bør flyttes til temaet; og at underscores repræsenterer mellemrum i vilkårlige værdier (f.eks. calc(100%_-_64px)). Dette afslutter kurset i JIT og produktionsoptimering — næste emne er designtokens og systematisk tematisering.