Budowanie warstwy tokenów i konfiguracji
Zaimplementują Państwo tokeny projektowe jako zmienne CSS, połączą je z konfiguracją Tailwind i przetestują w trybie jasnym oraz ciemnym.
Budowanie warstwy tokenów i konfiguracji to bezpłatna lekcja Tailwind CSS Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Tailwind CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Omówienie warstwy tokenów
Warstwa tokenów łączy decyzje projektowe z generowaniem narzędzi Tailwind. Składa się z niestandardowych właściwości CSS (tokenów projektowych na poziomie CSS) oraz konfiguracji Tailwind, która odwołuje się do tych właściwości. Po prawidłowym wdrożeniu zmiana motywu wymaga jedynie zmiany wartości zmiennych CSS — nie zmieniają się nazwy klas Tailwind ani kod komponentów.
Definiowanie tokenów prymitywnych
Zacznij od zdefiniowania wszystkich surowych wartości kolorów, odstępów i typografii w pliku tokens/primitives.css, używając niestandardowych właściwości CSS. Komponenty nie korzystają bezpośrednio z tych prymitywów — służą one wyłącznie do zasilania warstwy tokenów semantycznych. Stosuj uporządkowaną konwencję nazewnictwa, na przykład --color-blue-500 dla kolorów i --space-4 dla wartości odstępów.
/* 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;
}Definiowanie tokenów semantycznych
Tokeny semantyczne nadają znaczenie wartościom prymitywnym. Zdefiniuj je w osobnym pliku tokens/semantic.css. Każdy token semantyczny odwołuje się do tokenu prymitywnego i reprezentuje przeznaczenie, a nie wartość. Ten sam token semantyczny można nadpisać w zakresie trybu ciemnego lub innej marki, aby przełączać motywy.
/* 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);
}Nadpisywanie tokenów w trybie ciemnym
Nadpisuj tokeny semantyczne w ramach klasy .dark (w przypadku strategii klas) lub reguły @media (prefers-color-scheme: dark) (w przypadku strategii mediów). Zmieniaj wyłącznie tokeny semantyczne — definicje prymitywów pozostają bez zmian. Na tym polega siła systemu dwupoziomowego: tryb ciemny jest implementowany w całości w warstwie tokenów, bez żadnych zmian w CSS komponentów ani klasach Tailwind.
/* 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 */
}Podłączanie tokenów do konfiguracji Tailwind
Odwołuj się do niestandardowych właściwości CSS w rozszerzeniu motywu konfiguracji Tailwind. Użyj wartości var(--token-name). Oznacza to, że każde narzędzie Tailwind odwołujące się do tokenu motywu będzie w czasie działania korzystać ze zmiennej CSS, co umożliwia przełączanie motywu na żywo bez ponownej kompilacji. Silnik JIT generuje w wynikowym CSS klasy z wartościami var().
// 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)',
},
},
},
};Używanie narzędzi opartych na tokenach w komponentach
Po podłączeniu tokenów do konfiguracji używasz ich tak jak dowolnego innego koloru Tailwind. bg-surface stosuje zmienną CSS --color-surface jako tło. Gdy użytkownik przełączy się na tryb ciemny, wartość zmiennej CSS zmieni się, a tło zostanie automatycznie zaktualizowane bez modyfikowania komponentu. Klasy oparte na tokenach wyglądają w znacznikach tak samo jak wbudowane klasy Tailwind.
<!-- 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>Tokeny typografii
Zdefiniuj rodzinę fontów, rozmiar fontu, wysokość wiersza i grubość fontu jako tokeny. Rodziny fontów powinny odwoływać się do zmiennej CSS, aby zmiana kroju marki wymagała tylko zmiany zmiennej. Rozmiary fontów można rozszerzyć w konfiguracji Tailwind o nazwy semantyczne, takie jak text-display i text-caption, obok domyślnej skali numerycznej.
/* 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' }],
},
},
},Tokeny odstępów i promieni zaokrąglenia
Rozszerz skale odstępów i promieni obramowania o nazwy semantyczne reprezentujące stałe na poziomie komponentów. Zamiast pamiętać, że karty używają rounded-xl, a odznaki — rounded-full, zdefiniuj w konfiguracji radius.card: xl i radius.badge: full. Dzięki temu kod komponentów sam opisuje swoje przeznaczenie, a wszystkie karty używają tego samego promienia nawet po zmianie jego wartości.
// 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',
},
},
},Tokeny cieni
Zdefiniuj spójne poziomy cieni w konfiguracji Tailwind, używając nazw semantycznych. Cienie komunikują hierarchię wizualną: none dla płaskich elementów, card dla elementów powierzchni, elevated dla list rozwijanych i modali, a focus dla wskaźników stanu interakcji. Zapobiega to rozproszonym po bazie kodu dowolnym wartościom cieni.
// 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">Weryfikowanie tokenów w CI
Dodaj do CI krok weryfikujący integralność tokenów — sprawdzający, czy każdy token semantyczny odwołuje się do istniejącego tokenu prymitywnego oraz czy żaden token semantyczny nie zawiera surowej wartości szesnastkowej, która omijałaby system dwupoziomowy. Prosty skrypt Node.js, który analizuje plik zmiennych CSS i sprawdza odwołania, może wykryć rozbieżności tokenów, zanim trafią one na produkcję.
// 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.');Testowanie przełączania tokenów trybu ciemnego
Testuj wizualnie tryb ciemny na poziomie tokenów, przełączając klasę .dark na elemencie html i sprawdzając, czy każda semantyczna powierzchnia kolorystyczna, tekst i obramowanie są renderowane prawidłowo. Użyj Playwright lub Cypress do wykonania zrzutów ekranu z zastosowaną klasą dark i porównaj je z punktami odniesienia dla trybu jasnego. Uruchamiaj ten zestaw testów po każdej zmianie pliku tokenów, aby natychmiast wykrywać regresje wizualne.
// 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');
});Szybkie sprawdzenie
Sprawdź swoją znajomość zagadnień Tailwind CSS Mastery z tej lekcji.
Podsumowanie lekcji
W tej lekcji nauczył się Pan / nauczyła się Pani: definiować tokeny prymitywne i semantyczne jako niestandardowe właściwości CSS w osobnych plikach, podłączać tokeny semantyczne do konfiguracji Tailwind za pomocą var(), aby były aktualizowane w czasie działania, oraz implementować tryb ciemny przez nadpisywanie wyłącznie tokenów semantycznych w ramach klasy .dark. Następnie zbudujemy bibliotekę komponentów z użyciem tych tokenów.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „Budowanie warstwy tokenów i konfiguracji” jest bezpłatna?
Tak — pełny tekst „Budowanie warstwy tokenów i konfiguracji” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Tailwind CSS Academy, przejdź na CoddyKit PRO. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Budowanie warstwy tokenów i konfiguracji”?
Zaimplementują Państwo tokeny projektowe jako zmienne CSS, połączą je z konfiguracją Tailwind i przetestują w trybie jasnym oraz ciemnym. Ćwiczysz Tailwind CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Tailwind CSS Academy?
Nie wymagamy żadnego doświadczenia. Tailwind CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Budowanie warstwy tokenów i konfiguracji”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Tailwind CSS Academy?
Tak. Każda lekcja Tailwind CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Planowanie systemu projektowego
- Budowanie warstwy tokenów i konfiguracji
- Budowanie biblioteki komponentów
- Dokumentacja i przekazanie zespołowi