Tailwind CSS Academy · Les

Arbitraire waarden en hun kosten

Gebruik bracketnotatie zoals w-[347px] voor eenmalige waarden en begrijp de afweging tussen flexibiliteit en een mogelijk opgeblazen stylesheet.

Les 4 van 413 stappen

Arbitraire waarden en hun kosten is een gratis Tailwind CSS Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Tailwind CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Tailwind CSS Academy bevat in totaal 4 lessen.

Wat zijn willekeurige waarden

Met Tailwinds syntaxis voor willekeurige waarden kun je elke CSS-waarde rechtstreeks in een klassenaam gebruiken met vierkante haken. Je bent dan niet beperkt tot de vooraf ingestelde schaal van Tailwind: je kunt bijvoorbeeld w-[347px], text-[#1a2b3c] of grid-cols-[1fr_2fr_1fr] schrijven.

Deze functie, die door de JIT-engine wordt ingeschakeld, is een van de krachtigste mogelijkheden van Tailwind. Ze overbrugt de kloof tussen hulpprogrammaklassen en de zeldzame gevallen waarin echt een precieze waarde buiten de schaal nodig is.

<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>

Syntaxisreferentie voor willekeurige waarden

De syntaxis met vierkante haken werkt met elk voorvoegsel van een Tailwind-hulpprogramma. De waarde tussen de haken wordt rechtstreeks als CSS-waarde doorgegeven. Spaties in de waarde geef je weer met underscores (Tailwind vervangt die vóór het parseren).

Bij hulpprogramma's die meerdere CSS-eigenschappen genereren, ontvangt alleen de relevante eigenschap de willekeurige waarde. Zo stelt p-[12px] alle vier de waarden voor de binnenmarge in op 12px, net als p-4, maar met een aangepaste waarde.

<!-- 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>

Wanneer gebruik je willekeurige waarden

Willekeurige waarden zijn geschikt in specifieke situaties:

Precieze positionering: een tooltip die exact met een referentiepunt moet uitlijnen (top-[3px])
Externe beperkingen: de hoogte of afronding van de rand van een component van derden overnemen
Unieke merkkleuren: een merkkleur die niet goed in het Tailwind-palet past (bg-[#e63946])
Dynamische CSS-expressies: waarden met calc, min, max of clamp

Ze zijn NIET geschikt voor waarden die in het ontwerpsysteem thuishoren — gebruik daarvoor een uitbreiding van het thema.

<!-- 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>

Willekeurige waarden versus thema-uitbreiding

Als een waarde op meerdere plaatsen in je project wordt gebruikt, hoort die in de thema-uitbreiding te staan en niet als willekeurige waarde. Door de waarde aan het thema toe te voegen, geef je die een semantische naam, houd je het gebruik consistent en kun je de waarde op één plek wijzigen.

Een goede regel: gebruik je een willekeurige waarde twee keer in verschillende bestanden, maak er dan een themawaarde van. Komt de waarde slechts één keer voor in een zeer specifieke context, dan is een willekeurige waarde prima.

// 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 named

De kosten van elke willekeurige waarde

Elke unieke willekeurige waarde genereert een unieke CSS-regel. Vijf keer w-[347px] in hetzelfde bestand genereert slechts één CSS-regel (JIT verwijdert duplicaten). Maar w-[347px], w-[348px] en w-[349px] in verschillende componenten genereren elk een aparte regel — drie aparte regels voor waarden die slechts één pixel verschillen.

Dat zijn de kosten van willekeurige waarden: ze kunnen het hergebruik van CSS tenietdoen dat hulpprogrammaklassen efficiënt maakt. Tien iets verschillende willekeurige breedtes genereren tien aparte regels in plaats van één gedeeld hulpprogramma.

/* 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 */

Syntaxis voor willekeurige eigenschappen

Naast voorvoegsels van hulpprogramma's ondersteunt Tailwinds JIT ook willekeurige CSS-eigenschappen met de syntaxis [property:value] — vierkante haken met daarin een CSS-eigenschapsnaam en een waarde, gescheiden door een dubbele punt.

Dit is de uitweg voor CSS-eigenschappen waarvoor Tailwind geen hulpprogramma heeft, zoals [mask-image:linear-gradient(...)], [scroll-snap-type:x_mandatory] of eigenschappen met een leveranciersvoorvoegsel. Gebruik dit met mate — als je veel willekeurige eigenschappen nodig hebt, kun je beter een Tailwind-plug-in toevoegen.

<!-- 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>

Willekeurige waarden met varianten

Willekeurige waarden kunnen volledig worden gecombineerd met alle voorvoegsels van varianten. Je kunt responsieve, hover-, focus-, donkere en andere varianten combineren met elke willekeurige waarde — net zoals bij standaardhulpprogramma's.

Zo krijg je de volledige kracht van Tailwinds variantsysteem voor aangepaste waarden. Een aangepaste hoverkleur buiten de schaal, een responsieve aangepaste breedte of een willekeurige kleurwaarde voor de donkere modus werkt allemaal probleemloos.

<!-- 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>

Willekeurige kleurwaarden en dekking

Bij het gebruik van willekeurige hex-kleuren kun je ook met een schuine streep de dekking aanpassen: bg-[#e63946]/50 stelt de achtergrond in op 50% dekking. Dit werkt omdat de syntaxis voor dekking met een schuine streep een JIT-functie is die werkt ongeacht of de basiskleur uit het palet komt of een willekeurige waarde is.

Je kunt ook de functies rgba() of hsl() rechtstreeks tussen de haken gebruiken voor willekeurige dekking of controle over het kleurmodel.

<!-- 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-tekens in willekeurige waarden

Sommige tekens in willekeurige waarden moeten worden geëscapet, omdat ze een betekenis hebben in CSS of HTML. Gebruik in willekeurige Tailwind-waarden underscores voor spaties (Tailwind zet die automatisch om) en escape haakjes en andere speciale tekens in calc() door underscores te gebruiken voor spaties binnen de functie.

Wikkel waarden voor URL's, zoals achtergrondafbeeldingen, in enkele aanhalingstekens: bg-[url('/img/hero.png')]. Tailwind behoudt de enkele aanhalingstekens in de gegenereerde CSS.

<!-- 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>

Controleer je willekeurige waarden

Doorzoek je codebasis regelmatig op alle toepassingen van willekeurige waarden om kandidaten voor opname in het thema te vinden. Met een snelle grep vind je elke klasse met vierkante haken in je project:

Elke waarde die meer dan twee keer in verschillende bestanden voorkomt, is een sterke kandidaat voor een benoemd thematoken. Een waarde die één keer voorkomt, is prima als willekeurige waarde. Waarden die lijken bij een consistente schaal te horen, zoals w-[350px], w-[360px] en w-[370px], geven aan dat een gebruikspatroon buiten de schaal moet worden gestandaardiseerd.

# 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+ times

Willekeurige waarden combineren met hulpprogramma's

Willekeurige waarden kunnen op natuurlijke wijze worden gecombineerd met standaardhulpprogrammaklassen in dezelfde klassentekenreeks. Je kunt schaalhulpprogramma's en willekeurige waarden vrij combineren — dat is bewust zo ontworpen en geen noodoplossing. Het ontwerpsysteem behandelt 95% van de gevallen met schaalhulpprogramma's; willekeurige waarden vullen de resterende 5% aan.

De belangrijkste discipline is om eerst schaalhulpprogramma's te gebruiken en pas naar willekeurige waarden te grijpen wanneer de schaal echt niet biedt wat je nodig hebt. Handhaaf deze discipline tijdens codebeoordelingen, zodat je opmaak geen verzameling willekeurige waarden buiten de schaal wordt.

<!-- 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>

Korte controle

Test je begrip van de concepten uit Tailwind CSS Mastery in deze les.

Beantwoord dit in de interactieve les

Samenvatting van de les

In deze les heb je geleerd dat willekeurige waarden de syntaxis [value] met vierkante haken gebruiken om met behulp van on-demand-generatie door JIT elke CSS-waarde aan een hulpprogramma toe te kennen; dat elke unieke willekeurige waarde een unieke CSS-regel genereert, waardoor herhaalde waarden buiten de schaal in verschillende bestanden naar het thema moeten worden verplaatst; en dat underscores spaties voorstellen in willekeurige waarden, bijvoorbeeld calc(100%_-_64px). Hiermee is de cursus over JIT en productieoptimalisatie afgerond — hierna behandelen we ontwerptokens en systematische thematisering.

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 30
Lessen: 120

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Arbitraire waarden en hun kosten” gratis?

Ja — de volledige tekst van “Arbitraire waarden en hun kosten” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Tailwind CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Tailwind CSS Academy bevat in totaal 4 lessen.

Wat leer ik in “Arbitraire waarden en hun kosten”?

Gebruik bracketnotatie zoals w-[347px] voor eenmalige waarden en begrijp de afweging tussen flexibiliteit en een mogelijk opgeblazen stylesheet. Je oefent met Tailwind CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Tailwind CSS Academy te beginnen?

Ervaring vooraf is niet nodig. Tailwind CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.

Hoe lang duurt de les “Arbitraire waarden en hun kosten”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Tailwind CSS Academy?

Ja. Elke les over Tailwind CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

Hoe de JIT-engine werkt
Dynamische classes op de safelist zetten
Bundelgrootte analyseren en verkleinen
Arbitraire waarden en hun kosten

← Terug naar Tailwind CSS Academy