Primitiiviset ja semanttiset tokenit
Määritelkää primitiiviset tokenit, kuten color.blue.500, ja semanttiset tokenit, kuten color.primary, ja yhdistäkää ne Tailwind-asetuksissa joustavaa teeman vaihtamista varten.
Primitiiviset ja semanttiset tokenit on ilmainen Tailwind CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Tailwind CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä suunnittelutunnisteet ovat
Suunnittelutunnisteet ovat nimettyjä arvoja, joihin tallennetaan suunnittelujärjestelmän visuaaliset päätökset, kuten värit, välit, fonttikoot ja paljon muuta. Sen sijaan että kovakoodaisitte #3b82f6-arvon kaikkialle CSS:ään, annatte sille nimen ja viittaatte tähän nimeen kaikkialla. Näin syntyy helposti maailmanlaajuisesti päivitettävä yksi totuuden lähde. Tailwindin asetukset ovat luonteva paikka suunnittelutunnisteille, koska se luo hyödykeluokat näiden nimettyjen arvojen perusteella.
Primitiivitunnisteet määritelty
Primitiivitunnisteet ovat raakoja, kuvailevia arvoja, joihin ei liity semanttista merkitystä. Ne kuvaavat, mikä arvo on, eivät sitä, missä sitä käytetään. Esimerkkejä ovat color.blue.500, spacing.4 ja fontSize.lg. Tailwindin oletusväripaletti koostuu kokonaan primitiiveistä: blue-500, red-300 ja niin edelleen. Viittaatte primitiiveihin rakentaessanne korkeamman tason semanttista kerrosta.
// Primitive tokens in tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'blue-brand': '#3b82f6',
'blue-brand-dark': '#1d4ed8',
'red-danger': '#ef4444',
'green-success': '#22c55e'
}
}
}
}Semanttiset tunnisteet määritelty
Semanttiset tunnisteet kuvaavat arvon käyttötarkoitusta, eivät sen raakaa ulkoasua. blue-500-arvon sijaan määrittelisitte esimerkiksi color.primary-arvon. red-500-arvon sijaan määrittelisitte color.danger-arvon. Semanttiset tunnisteet tekevät koodikannastanne tarkoituslähtöisen — text-primary-merkinnän lukeva kehittäjä ymmärtää heti, että kyseessä on brändin pääväri riippumatta siitä, mikä väri käytännössä on. Tämä abstraktiotaso mahdollistaa helpon teemoittamisen ja uudelleenbrändäyksen.
// Semantic tokens built on top of primitives
module.exports = {
theme: {
extend: {
colors: {
primary: '#3b82f6', // maps to blue-brand primitive
'primary-hover': '#1d4ed8',
danger: '#ef4444', // maps to red-danger primitive
success: '#22c55e' // maps to green-success primitive
}
}
}
}Kaksikerroksinen tunnistearkkitehtuuri
Vankassa token-järjestelmässä on kaksi kerrosta: alimmalla tasolla primitiivit ja niiden päällä semantiikka. Primitiivikerros tallentaa kaikki raaka-arvot, joita suunnittelussa saatetaan koskaan tarvita. Semanttinen kerros yhdistää nämä primitiivit käyttötarkoitusta kuvaaviin nimiin. Kun brändivärinne muuttuu, päivität primitiivin kerran, ja kaikki siihen viittaavat semanttiset tokenit perivät muutoksen automaattisesti. Tämä vastuiden erottelu on skaalautuvien suunnittelujärjestelmien perusta.
// Two-layer architecture
const primitives = {
blue500: '#3b82f6',
blue700: '#1d4ed8',
gray900: '#111827'
};
// tailwind.config.js semantic layer
module.exports = {
theme: {
extend: {
colors: {
primary: primitives.blue500,
'primary-dark': primitives.blue700,
'text-base': primitives.gray900
}
}
}
}Semanttisten tokenien käyttäminen merkinnässä
Kun semanttiset tokenit on rekisteröity Tailwind-määrityksissä, ne ovat käytettävissä utility-luokkina kaikissa väriä hyväksyvissä utilityissä. Voitte käyttää luokkia bg-primary, text-primary, border-primary ja ring-primary — kaikki viittaavat samaan semanttiseen arvoon. Kun muutatte ensisijaista väriä määrityksissä, jokainen näitä semanttisia utilityjä käyttävä käyttöliittymän elementti päivittyy välittömästi.
<button class="bg-primary hover:bg-primary-dark text-white px-4 py-2 rounded-lg">
Save Changes
</button>
<span class="text-danger font-medium">Error: field required</span>
<div class="border border-success bg-success/10 p-3 rounded">
Successfully saved!
</div>Tokenien nimeämiskäytännöt
Hyvä tokenien nimeäminen noudattaa johdonmukaista kaavaa, joka ilmaisee roolin ja mittakaavan. Yleinen käytäntö käyttää muotoa category.role.modifier — esimerkiksi color.action.default, color.action.hover ja color.action.disabled. Välttäkää liian yksityiskohtaisia nimiä, kuten submit-button-blue — ne eivät toimi enää heti, kun haluatte käyttää tokenia muualla. Valitkaa nimet, jotka kuvaavat tarkoitusta ja mittakaavaa, eivät visuaalista toteutusta.
// Good naming: intent-based
colors: {
'action-default': '#3b82f6',
'action-hover': '#1d4ed8',
'action-disabled': '#93c5fd',
'surface-base': '#ffffff',
'surface-raised': '#f8fafc',
'text-primary': '#111827',
'text-muted': '#6b7280'
}
// Avoid: too specific or too abstract
// 'btn-blue', 'thing1', 'color7'Primitiivien yhdistäminen semantiikkaan
Selkein tapa ylläpitää kaksikerroksista arkkitehtuuria on määritellä primitiivit JavaScript-vakioiksi erilliseen tiedostoon ja tuoda ne Tailwind-määrityksiin. Näin primitiivit pysyvät luettavina ja uudelleenkäytettävinä, kun taas määritystiedosto sisältää vain semanttiset yhdistämiset. Kun suunnittelija muuttaa brändin väripalettia, vain primitiivitiedostoa tarvitsee päivittää — semanttinen yhdistäminen säilyy ennallaan.
// tokens/primitives.js
module.exports = {
blue50: '#eff6ff',
blue500: '#3b82f6',
blue700: '#1d4ed8',
rose500: '#f43f5e',
gray100: '#f3f4f6',
gray900: '#111827'
};
// tailwind.config.js
const p = require('./tokens/primitives');
module.exports = {
theme: {
extend: {
colors: {
primary: p.blue500,
'primary-hover': p.blue700,
'primary-light': p.blue50,
danger: p.rose500
}
}
}
}Semanttiset väli- ja typografiatokenit
Tokenit eivät rajoitu väreihin. Voitte määritellä myös semanttisia väli- ja typografiatokeneita. p-4-luokan sijaan semanttinen väli-token nimeltä card-padding kertoo, mihin väliä käytetään. Tailwindissa nämä lisätään kohtiin theme.extend.spacing ja theme.extend.fontSize. Näin käyttöliittymä pysyy yhdenmukaisena: sovelluksen jokainen kortti käyttää samaa p-card-sisätilaa, ja sisätilaa tarvitsee säätää vain kerran.
module.exports = {
theme: {
extend: {
spacing: {
'card': '1.5rem', // p-card = 24px
'section': '5rem', // py-section = 80px
'nav-height': '4rem' // h-nav-height
},
fontSize: {
'hero': ['3.5rem', { lineHeight: '1.1' }],
'body': ['1rem', { lineHeight: '1.6' }]
}
}
}
}Interaktiivisten tilojen tokenit
Interaktiivisten tilojen tokenien määrittäminen on yhtä tärkeää. Ensisijainen painike tarvitsee tokenit oletus-, hover-, aktiiviseen ja käytöstä poistettuun ulkoasuunsa. Ilman semanttisia tokeneita jokainen kehittäjä saattaa valita hover-tilaan hieman erilaisen sävyn, mikä aiheuttaa visuaalista epäjohdonmukaisuutta. Semanttisten tokenien, kuten action-hover ja action-disabled, avulla järjestelmän jokainen painike reagoi käyttäjän toimintaan samalla tavalla.
<button
class="bg-action-default hover:bg-action-hover active:bg-action-active
disabled:bg-action-disabled disabled:cursor-not-allowed
text-white px-5 py-2.5 rounded-lg transition-colors"
>
Submit
</button>
<!-- tailwind.config.js colors:
action-default: '#3b82f6'
action-hover: '#1d4ed8'
action-active: '#1e40af'
action-disabled:'#93c5fd'
-->Tokenit vaaleassa ja tummassa tilassa
Semanttiset tokenit pääsevät parhaiten oikeuksiinsa yhdessä tumman tilan kanssa. Primitiivitokenilla, kuten blue-500, on kiinteä arvo, mutta semanttinen token, kuten primary, voi viitata eri primitiiveihin vaaleassa ja tummassa tilassa. CSS-muuttujien käyttäminen siltana mahdollistaa vaihtamisen ajonaikaisesti ilman CSS:n uudelleenluontia. Tätä tekniikkaa käsitellään tarkemmin teemaosiossa, mutta sen ymmärtäminen, että semanttiset tokenit mahdollistavat sen, on tärkeä arkkitehtoninen oivallus.
/* global.css */
:root {
--color-primary: #3b82f6;
--color-surface: #ffffff;
--color-text: #111827;
}
.dark {
--color-primary: #60a5fa;
--color-surface: #1f2937;
--color-text: #f9fafb;
}
/* tailwind.config.js */
colors: {
primary: 'var(--color-primary)',
surface: 'var(--color-surface)',
'text-base': 'var(--color-text)'
}Tokenien tarkastus ja ylläpito
Suunnittelujärjestelmän kasvaessa tokenien tarkastuksista tulee välttämättömiä. Tarkastuksessa selvitetään, käytetäänkö jokaista tokenia aktiivisesti, ovatko jotkin tokenit etääntyneet dokumentoidusta tarkoituksestaan ja onko syntynyt uusia malleja, jotka tarvitsevat uuden tokenin. Työkalut, kuten grep, tai erilliset suunnittelutokenien hallintatyökalut voivat etsiä koodikannasta käyttämättömiä tokeneita. Käyttämättömien tokenien poistaminen pitää määritykset selkeinä ja vähentää tiimiin liittyvien uusien kehittäjien kognitiivista kuormaa.
// Find tokens in config not used in markup
// (pseudocode — run as a build-time lint check)
const definedTokens = Object.keys(theme.colors);
const usedTokens = scanHTMLFiles(srcDir)
.flatMap(file => extractTailwindClasses(file))
.map(cls => cls.replace(/^(bg|text|border|ring)-/, ''));
const unusedTokens = definedTokens
.filter(t => !usedTokens.includes(t));
console.log('Unused tokens:', unusedTokens);Pikatarkistus
Testaa Tailwind CSS Mastery -oppitunnin käsitteiden ymmärtämistä.
Oppitunnin yhteenveto
Tässä oppitunnissa opitte, että primitiivitokenit ovat raakoja nimettyjä arvoja, kuten color.blue.500, semanttiset tokenit yhdistävät nämä primitiivit tarkoitusta ilmaiseviin nimiin, kuten color.primary, ja kaksikerroksinen arkkitehtuuri erottaa sen, mikä arvo on, siitä, missä sitä käytetään. Seuraavaksi tutustumme siihen, miten CSS-muuttujat yhdistävät Tailwind-tokenit ajonaikaiseen teeman vaihtamiseen.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Primitiiviset ja semanttiset tokenit” ilmainen?
Kyllä – oppitunnin ”Primitiiviset ja semanttiset tokenit” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Tailwind CSS Academy-kurssin, päivitä CoddyKit PROhon. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Primitiiviset ja semanttiset tokenit”?
Määritelkää primitiiviset tokenit, kuten color.blue.500, ja semanttiset tokenit, kuten color.primary, ja yhdistäkää ne Tailwind-asetuksissa joustavaa teeman vaihtamista varten. Harjoittelet Tailwind CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Tailwind CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Tailwind CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”Primitiiviset ja semanttiset tokenit”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Tailwind CSS Academy-oppitunnilla?
Kyllä. Jokainen Tailwind CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Primitiiviset ja semanttiset tokenit
- CSS-muuttujiin perustuva teemoitus
- Usean brändin teemoitusstrategia
- Tokenien dokumentointi ja hallinta