Arbitrære verdier og kostnadene ved dem
Bruk hakeparentesnotasjon som w-[347px] for enkeltstående verdier, og forstå avveiningen mellom fleksibilitet og et potensielt overdimensjonert stilark.
Arbitrære verdier og kostnadene ved dem er en gratis leksjon i Tailwind CSS Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Tailwind CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Tailwind CSS Academy inneholder totalt 4 leksjoner.
Hva er vilkårlige verdier
Tailwinds syntaks for vilkårlige verdier lar deg bruke hvilken som helst CSS-verdi direkte i et klassenavn ved hjelp av hakeparenteser. I stedet for å være begrenset til Tailwinds forhåndsdefinerte skala kan du skrive w-[347px], text-[#1a2b3c] eller grid-cols-[1fr_2fr_1fr].
Denne funksjonen, som aktiveres av JIT-motoren, er en av Tailwinds kraftigste egenskaper. Den bygger bro mellom verktøyklasser og de sjeldne tilfellene der det faktisk er behov for en presis verdi utenfor skalaen.
<div class="w-[347px] h-[calc(100vh-64px)] bg-[#1a1a2e] text-[#e2e8f0]">
Arbitrary values for precise control
</div>
<div class="grid grid-cols-[1fr_2fr_1fr] gap-[22px]">
Custom grid layout with arbitrary columns
</div>Syntaksreferanse for vilkårlige verdier
Syntaksen med hakeparenteser fungerer med alle prefikser for Tailwind-verktøyklasser. Verdien i hakeparentesene sendes direkte videre som CSS-verdi. Mellomrom i verdien representeres med understreker (Tailwind erstatter dem før analysen).
For verktøyklasser som genererer flere CSS-egenskaper, mottar bare den relevante egenskapen den vilkårlige verdien. p-[12px] setter for eksempel alle fire innvendige marger til 12px, på samme måte som p-4, men med en egendefinert verdi.
<!-- Width and height -->
<div class="w-[240px] h-[180px]"></div>
<!-- Custom color -->
<div class="bg-[#f0a500] text-[#2d3748]"></div>
<!-- Calc values -->
<div class="top-[calc(50%_-_24px)]"></div>
<!-- CSS variables -->
<div class="bg-[var(--primary-color)]"></div>
<!-- Custom grid -->
<div class="grid-cols-[200px_1fr_minmax(200px,_1fr)]"></div>
<!-- Spacing with custom value -->
<div class="mt-[7px] px-[18px]"></div>Når bør du bruke vilkårlige verdier
Vilkårlige verdier passer i bestemte situasjoner:
- Presis plassering: Et verktøytips som må justeres nøyaktig i forhold til et referansepunkt (
top-[3px]) - Eksterne begrensninger: Tilpasse høyden eller avrundingen på kanten til en tredjepartskomponent
- Unike merkevarefarger: En merkevarefarge som ikke passer godt inn i Tailwind-paletten (
bg-[#e63946]) - Dynamiske CSS-uttrykk: Verdier med
calc,min,maxellerclamp
De passer IKKE for verdier som hører hjemme i designsystemet – bruk en tema-utvidelse for slike verdier.
<!-- Appropriate: precise positioning calculation -->
<div class="absolute top-[calc(50%_-_24px)] left-[calc(50%_-_24px)]"
aria-label="Loading">
Loading spinner centered
</div>
<!-- Appropriate: brand color not in default palette -->
<header class="bg-[#e63946] text-white">
Brand header
</header>
<!-- Inappropriate: use theme extension instead -->
<!-- <div class="w-[96px]"> Use w-24 (96px) from default scale instead! -->
<div class="w-24">Use the scale utility</div>Vilkårlige verdier kontra tema-utvidelse
Når en verdi brukes flere steder i prosjektet, hører den hjemme i tema-utvidelsen, ikke som en vilkårlig verdi. Når du legger den til i temaet, får den et semantisk navn, blir konsekvent og kan endres på ett sted.
En god regel er: Hvis du bruker en vilkårlig verdi to ganger i forskjellige filer, bør du flytte den inn i temaet. Hvis den bare forekommer én gang i en svært spesifikk sammenheng, er en vilkårlig verdi helt greit.
// Instead of repeating w-[347px] in 5 components:
// ❌ Scattered arbitrary values
// <div class="w-[347px]">...</div> (component A)
// <div class="w-[347px]">...</div> (component B)
// <div class="w-[347px]">...</div> (component C)
// ✅ Theme extension — one source of truth
// tailwind.config.js:
module.exports = {
theme: {
extend: {
width: {
'sidebar': '347px',
},
},
},
};
// Usage:
// <div class="w-sidebar">...</div> -- consistent and namedKostnaden ved hver vilkårlige verdi
Hver unike vilkårlige verdi genererer en unik CSS-regel. Fem forekomster av w-[347px] i samme fil genererer bare én CSS-regel (JIT fjerner duplikater). Men w-[347px], w-[348px] og w-[349px] i forskjellige komponenter genererer separate regler – tre separate regler for verdier som bare skiller seg med én piksel.
Dette er kostnaden ved vilkårlige verdier: De kan hindre gjenbruk av CSS, som er det som gjør verktøyklasser effektive. Ti litt forskjellige vilkårlige bredder genererer ti separate regler i stedet for én delt verktøyklasse.
/* Each generates a separate CSS rule */
.w-\[347px\] { width: 347px; }
.w-\[348px\] { width: 348px; }
.w-\[349px\] { width: 349px; }
.top-\[calc\(50\%-24px\)\] { top: calc(50% - 24px); }
.top-\[calc\(50\%-32px\)\] { top: calc(50% - 32px); }
/* Compare: the scale utilities share values across all usages */
/* .w-24 is generated once and reused wherever w-24 appears */Syntaks for vilkårlige egenskaper
I tillegg til prefikser for verktøyklasser støtter Tailwinds JIT også vilkårlige CSS-egenskaper med syntaksen [property:value] – en hakeparentes som inneholder både navnet på en CSS-egenskap og en verdi, atskilt med kolon.
Dette er en nødløsning for CSS-egenskaper som Tailwind ikke har en verktøyklasse for, for eksempel [mask-image:linear-gradient(...)], [scroll-snap-type:x_mandatory] eller leverandørprefiksede egenskaper. Bruk dette med måte – hvis du begynner å bruke mange vilkårlige egenskaper, bør du vurdere å legge til en Tailwind-plugin i stedet.
<!-- Arbitrary CSS property -->
<div class="[mask-image:linear-gradient(to_bottom,black,transparent)]
[scroll-snap-type:y_mandatory]
[-webkit-line-clamp:3]">
Content with non-utility CSS properties
</div>
<!-- Also works with variants -->
<div class="hover:[text-decoration:underline_wavy_red]
focus:[outline:2px_solid_blue]">
Custom hover/focus styles via arbitrary property
</div>Vilkårlige verdier med varianter
Vilkårlige verdier kan kombineres fullt ut med alle variantprefikser. Du kan kombinere responsive varianter, hover, focus, dark og andre varianter med enhver vilkårlig verdi – på samme måte som med standardverktøyklasser.
Dette gir deg full kraft fra Tailwinds variantsystem for egendefinerte verdier. En egendefinert hover-farge utenfor skalaen, en responsiv egendefinert bredde eller en vilkårlig fargeverdi i mørk modus fungerer sømløst.
<!-- Responsive arbitrary width -->
<div class="w-[240px] md:w-[320px] lg:w-[400px]">
Width changes at each breakpoint
</div>
<!-- Dark mode arbitrary color -->
<div class="bg-[#f8f9fa] dark:bg-[#1a1a2e] text-[#212529] dark:text-[#f8f9fa]">
Light/dark mode with arbitrary hex colors
</div>
<!-- Hover with arbitrary value -->
<button class="bg-[#e63946] hover:bg-[#c1121f] text-white px-4 py-2 rounded-lg">
Custom brand button
</button>Vilkårlige fargeverdier og gjennomsiktighet
Når du bruker vilkårlige heksadesimale farger, kan du også bruke gjennomsiktighetsmodifikatoren med en skråstrek: bg-[#e63946]/50 setter bakgrunnen til 50 % gjennomsiktighet. Dette fungerer fordi syntaksen for gjennomsiktighet med skråstrek er en JIT-funksjon som gjelder uavhengig av om grunnfargen kommer fra paletten eller er en vilkårlig verdi.
Du kan også bruke funksjonene rgba() eller hsl() direkte i hakeparentesene for å styre vilkårlig gjennomsiktighet eller fargemodell.
<!-- Arbitrary color with opacity modifier -->
<div class="bg-[#e63946]/50">50% opacity red</div>
<div class="bg-[#e63946]/75">75% opacity red</div>
<!-- RGB function -->
<div class="bg-[rgb(230,57,70)]">RGB red</div>
<!-- HSL function -->
<div class="bg-[hsl(353,76%,55%)]">HSL red</div>
<!-- RGBA for direct alpha control -->
<div class="bg-[rgba(230,57,70,0.5)]">RGBA with alpha</div>Escape-tegn i vilkårlige verdier
Noen tegn i vilkårlige verdier må beskyttes fordi de har en betydning i CSS eller HTML. I vilkårlige Tailwind-verdier bruker du understreker for mellomrom (Tailwind konverterer dem automatisk), og du beskytter parenteser og andre spesialtegn i calc() ved å bruke understreker for mellomrom inne i funksjonen.
For URL-verdier (for eksempel bakgrunnsbilder) omslutter du verdien med enkle anførselstegn: bg-[url('/img/hero.png')]. Tailwind bevarer de enkle anførselstegnene i den genererte CSS-en.
<!-- Underscore = space in arbitrary values -->
<div class="grid grid-cols-[200px_1fr] gap-[10px_20px]">
Column gap 10px, row gap 20px
</div>
<!-- calc with underscore-spaces -->
<div class="w-[calc(100%_-_64px)]">
Full width minus 64px
</div>
<!-- URL as background image -->
<div class="bg-[url('/img/hero.jpg')] bg-cover bg-center h-64">
Hero image
</div>Revider de vilkårlige verdiene
Søk jevnlig gjennom kodebasen etter all bruk av vilkårlige verdier for å finne kandidater til uttrekking i temaet. Et raskt grep-søk finner alle klasseverdier med hakeparenteser i prosjektet:
Alle verdier som forekommer mer enn to ganger i forskjellige filer, er gode kandidater for en navngitt temaverdi. En verdi som bare forekommer én gang, kan fint være vilkårlig. Verdier som ser ut til å høre hjemme i en konsekvent skala (som w-[350px], w-[360px], w-[370px]), viser at et bruksmønster utenfor skalaen bør standardiseres.
# Find all arbitrary value usages in your project
grep -roh 'class="[^"]*\[[^\]]*\][^"]*"' src/ | sort | uniq -c | sort -rn
# Or more targeted: find classes with bracket notation
grep -roh '[a-z:-]*\[[^\]]*\]' src/ --include='*.{html,js,jsx,ts,tsx}' | sort | uniq -c | sort -rn
# Review high-count arbitrary values — add to theme if used 3+ timesKombinere vilkårlige verdier med verktøyklasser
Vilkårlige verdier kan kombineres naturlig med standardverktøyklasser i den samme klassestrengen. Du kan fritt blande skala-baserte verktøyklasser og vilkårlige verdier – dette er tilsiktet, ikke en nødløsning. Designsystmet håndterer 95 % av tilfellene med skala-baserte verktøyklasser; vilkårlige verdier dekker de resterende 5 %.
Den viktigste disiplinen er å bruke skala-baserte verktøyklasser først og bare ty til vilkårlige verdier når skalaen faktisk ikke har det du trenger. Håndhev denne disiplinen i kodegjennomganger, slik at markuppen ikke blir en samling av vilkårlige verdier utenfor skalaen.
<!-- Mixing utilities and arbitrary values naturally -->
<div class="flex items-center gap-4 px-6 py-3 <!-- scale utilities -->
w-[480px] <!-- arbitrary: specific width -->
bg-[#1a1a2e] <!-- arbitrary: brand color -->
rounded-xl shadow-lg <!-- scale utilities again -->
text-sm font-medium text-white">
A card using both
</div>Kort kontroll
Test forståelsen din av konseptene i Tailwind CSS Mastery fra denne leksjonen.
Oppsummering av leksjonen
I denne leksjonen lærte du at vilkårlige verdier bruker syntaksen [value] med hakeparenteser for å angi hvilken som helst CSS-verdi på enhver verktøyklasse, generert ved behov av JIT; at hver unike vilkårlige verdi genererer en unik CSS-regel, så gjentatte verdier utenfor skalaen på tvers av filer bør flyttes inn i temaet; og at understreker representerer mellomrom i vilkårlige verdier (for eksempel calc(100%_-_64px)). Dette avslutter kurset i JIT og produksjonsoptimalisering – neste tema er designtokens og systematisk tematisering.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «Arbitrære verdier og kostnadene ved dem» gratis?
Ja – hele teksten i «Arbitrære verdier og kostnadene ved dem» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Tailwind CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Tailwind CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Arbitrære verdier og kostnadene ved dem»?
Bruk hakeparentesnotasjon som w-[347px] for enkeltstående verdier, og forstå avveiningen mellom fleksibilitet og et potensielt overdimensjonert stilark. Du øver på Tailwind CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Tailwind CSS Academy?
Ingen tidligere erfaring er nødvendig. Tailwind CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Arbitrære verdier og kostnadene ved dem»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Tailwind CSS Academy-leksjonen?
Ja. Alle Tailwind CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Slik fungerer JIT-motoren
- Tillat dynamiske klasser på en safeliste
- Analysere og redusere pakkestørrelsen
- Arbitrære verdier og kostnadene ved dem