Bygge token- og konfigurasjonslaget
Implementer designtokens som CSS-variabler, koble dem til Tailwind-konfigurasjonen, og test dem i lys og mørk modus.
Bygge token- og konfigurasjonslaget er en gratis leksjon i Tailwind CSS Academy på CoddyKit. Dette er leksjon 2 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.
Oversikt over tokenlaget
Tokenlaget er bindeleddet mellom designbeslutningene Deres og Tailwinds generering av utility-klasser. Det består av egendefinerte CSS-egenskaper (designtoken på CSS-nivå) og Tailwind-konfigurasjonen som refererer til disse egenskapene. Når det er implementert riktig, krever bytte av tema bare at CSS-variabelverdiene endres – ingen Tailwind-klassenavn eller komponentkode må endres.
Definere primitive token
Start med å definere alle råverdier for farger, mellomrom og typografi i filen tokens/primitives.css ved hjelp av egendefinerte CSS-egenskaper. Disse primitivene brukes ikke direkte av komponenter – de finnes bare for å forsyne det semantiske tokenlaget. Bruk en strukturert navnekonvensjon, for eksempel --color-blue-500 for farger og --space-4 for mellomromsverdier.
/* tokens/primitives.css */
:root {
/* Color primitives */
--color-blue-50: #eff6ff;
--color-blue-100: #dbeafe;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
--color-blue-900: #1e3a8a;
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-500: #6b7280;
--color-gray-900: #111827;
--color-white: #ffffff;
--color-black: #000000;
/* Spacing primitives */
--space-1: 0.25rem;
--space-4: 1rem;
--space-8: 2rem;
}Definere semantiske token
Semantiske token gir primitive verdier en betydning. Definer dem i en separat fil, tokens/semantic.css. Hvert semantisk token refererer til et primitivt token og representerer et formål i stedet for en verdi. Det samme semantiske tokenet overstyres innenfor et mørkt modus-omfang eller et annet merkevareomfang for å oppnå temabytte.
/* tokens/semantic.css */
:root {
/* Brand colors */
--color-primary: var(--color-blue-600);
--color-primary-hover: var(--color-blue-700);
--color-primary-light: var(--color-blue-50);
/* Surface colors */
--color-surface: var(--color-white);
--color-surface-elevated: var(--color-gray-50);
/* Text colors */
--color-text-primary: var(--color-gray-900);
--color-text-secondary: var(--color-gray-500);
/* Border colors */
--color-border: var(--color-gray-100);
}Overstyre token for mørk modus
Overstyr semantiske token under klassen .dark (for klassestrategien) eller @media (prefers-color-scheme: dark) (for mediestrategien). Bare semantiske token endres – de primitive definisjonene forblir uendret. Dette er styrken ved systemet med to nivåer: Mørk modus implementeres utelukkende i tokenlaget, uten endringer i komponentenes CSS eller Tailwind-klasser.
/* tokens/semantic.css (dark mode overrides) */
:root {
--color-surface: #ffffff;
--color-text-primary: #111827;
--color-border: #f3f4f6;
}
.dark {
--color-surface: #111827; /* was white */
--color-text-primary: #f9fafb; /* was dark gray */
--color-border: #1f2937; /* was light gray */
--color-surface-elevated: #1f2937;
/* --color-primary unchanged: blue works in both modes */
}Koble token til Tailwind-konfigurasjonen
Referer til egendefinerte CSS-egenskaper i Tailwind-konfigurasjonens theme-utvidelse. Bruk var(--token-name) som verdi. Det betyr at alle Tailwind-utility-klasser som refererer til tema-tokenet, bruker CSS-variabelen under kjøring, slik at temaet kan byttes dynamisk uten rekompilering. JIT-motoren genererer klasser med var()-verdier i den resulterende CSS-en.
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: {
DEFAULT: 'var(--color-primary)',
hover: 'var(--color-primary-hover)',
light: 'var(--color-primary-light)',
},
surface: 'var(--color-surface)',
'text-primary': 'var(--color-text-primary)',
'text-secondary': 'var(--color-text-secondary)',
border: 'var(--color-border)',
},
},
},
};Bruke tokenbaserte utility-klasser i komponenter
Når tokenene er koblet til konfigurasjonen, bruker De dem som alle andre Tailwind-farger. bg-surface bruker CSS-variabelen --color-surface som bakgrunn. Når brukeren bytter til mørk modus, endres CSS-variabelens verdi, og bakgrunnen oppdateres automatisk uten endringer i komponenten. Tokenbaserte klasser ser identiske ut med innebygde Tailwind-klasser i markupen.
<!-- Token-based Tailwind classes look just like built-in ones -->
<div class="bg-surface border border-border rounded-xl p-6">
<h2 class="text-text-primary font-semibold">Card Title</h2>
<p class="mt-2 text-text-secondary text-sm">Card description</p>
<button class="mt-4 rounded-lg bg-primary px-4 py-2 font-semibold text-white
hover:bg-primary-hover transition">
Primary Action
</button>
</div>Typografiske token
Definer skrifttypefamilie, skriftstørrelse, linjehøyde og skriftvekt som token. Skrifttypefamilier bør referere til en CSS-variabel, slik at bytte av merkevarens skrifttyper bare krever en variabelendring. Skriftstørrelser kan utvides i Tailwind-konfigurasjonen med semantiske navn som text-display og text-caption i tillegg til den numeriske standardskalaen.
/* tokens/semantic.css */
:root {
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
--font-display: 'Cal Sans', var(--font-sans);
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
}
// tailwind.config.js
theme: {
extend: {
fontFamily: {
sans: ['var(--font-sans)'],
display: ['var(--font-display)'],
mono: ['var(--font-mono)'],
},
fontSize: {
display: ['3.75rem', { lineHeight: '1.1', fontWeight: '700' }],
caption: ['0.75rem', { lineHeight: '1.5' }],
},
},
},Token for mellomrom og hjørneradius
Utvid skalaene for mellomrom og kantradius med semantiske navn for konstanter på komponentnivå. I stedet for å huske at kort bruker rounded-xl og merker bruker rounded-full, kan De definere radius.card: xl og radius.badge: full i konfigurasjonen. Da blir komponentkoden selvforklarende, og alle kort bruker samme radius selv om verdien endres.
// tailwind.config.js
theme: {
extend: {
borderRadius: {
card: '0.75rem', // 12px — used by Card, Dialog
input: '0.5rem', // 8px — used by Input, Select
badge: '9999px', // pill — used by Badge, Tag
button: '0.5rem', // 8px — used by all Button variants
},
spacing: {
18: '4.5rem',
22: '5.5rem',
128: '32rem',
},
},
},Skyggetoken
Definer konsistente skyggenivåer i Tailwind-konfigurasjonen ved hjelp av semantiske navn. Skygger uttrykker visuelt hierarki: none for flate elementer, card for overflateelementer, elevated for nedtrekkslister og modaler, og focus for indikatorer for interaktiv tilstand. Dette hindrer at vilkårlige skyggeverdier spres rundt i kodebasen.
// tailwind.config.js
theme: {
extend: {
boxShadow: {
card: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
elevated: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
focus: '0 0 0 3px var(--color-primary-light)',
},
},
},
<!-- Use semantic shadow names -->
<div class="shadow-card hover:shadow-elevated transition-shadow">Validere token i CI
Legg til et CI-trinn som validerer tokenenes integritet – kontroller at hvert semantiske token refererer til et eksisterende primitivt token, og at ingen semantiske token er en rå heksadesimalverdi (noe som ville omgå systemet med to nivåer). Et enkelt Node.js-skript som analyserer CSS-variabelfilen og kontrollerer referanser, kan oppdage avvik i tokenene før de når produksjon.
// scripts/validate-tokens.js
const fs = require('fs');
const semanticCss = fs.readFileSync('tokens/semantic.css', 'utf8');
const primitiveCss = fs.readFileSync('tokens/primitives.css', 'utf8');
// Extract all var() references in semantic.css
const refs = [...semanticCss.matchAll(/var\(([^)]+)\)/g)].map(m => m[1].trim());
// Check each ref exists in primitives.css
const missing = refs.filter(ref => !primitiveCss.includes(ref + ':'));
if (missing.length > 0) {
console.error('Undefined primitive tokens:', missing);
process.exit(1);
}
console.log('All tokens valid.');Teste bytte av token for mørk modus
Test mørk modus visuelt på token-nivå ved å slå klassen .dark på html av og på, og kontrollere at alle semantiske fargeoverflater, tekster og kanter gjengis riktig. Bruk Playwright eller Cypress til å ta skjermbilder med dark aktivert, og sammenlign dem med grunnlinjer for lys modus. Kjør denne testpakken hver gang tokenfilen endres, slik at visuelle regresjoner oppdages umiddelbart.
// playwright/dark-mode.spec.ts
import { test, expect } from '@playwright/test';
test('tokens switch correctly in dark mode', async ({ page }) => {
await page.goto('/tokens-preview');
// Light mode screenshot
await expect(page).toHaveScreenshot('tokens-light.png');
// Enable dark mode
await page.evaluate(() =>
document.documentElement.classList.add('dark')
);
// Dark mode screenshot
await expect(page).toHaveScreenshot('tokens-dark.png');
});Hurtigsjekk
Test forståelsen Deres av konseptene i Tailwind CSS Mastery fra denne leksjonen.
Oppsummering av leksjonen
I denne leksjonen lærte De å: definere primitive og semantiske token som egendefinerte CSS-egenskaper i separate filer, koble semantiske token til Tailwind-konfigurasjonen ved hjelp av var(), slik at de oppdateres under kjøring, og implementere mørk modus ved å overstyre bare semantiske token under klassen .dark. Neste steg er å bygge komponentbiblioteket ved hjelp av disse tokenene.
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 «Bygge token- og konfigurasjonslaget» gratis?
Ja – hele teksten i «Bygge token- og konfigurasjonslaget» 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 «Bygge token- og konfigurasjonslaget»?
Implementer designtokens som CSS-variabler, koble dem til Tailwind-konfigurasjonen, og test dem i lys og mørk modus. 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 2 av 4.
Hvor lang tid tar leksjonen «Bygge token- og konfigurasjonslaget»?
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
- Planlegge designsystemet
- Bygge token- og konfigurasjonslaget
- Bygge et komponentbibliotek
- Dokumentasjon og overlevering til teamet