Teema ja kohandamine

Tailwind teema on tasane kogum CSS-muutujaid. Saad seda täiendada või asendada sisendi CSS-is oleva plokiga @theme { … }, viidata nendele väärtustele CSS sees teemafunktsioonide abil ning lugeda lahendatud väärtused moodulist PHP. JavaScript konfiguratsioonifaili pole — teema asub täielikult CSS-is.

Plokk @theme

Plokk @theme määrab kujundustokenid CSS kohandatud atribuutidena. Iga muutuja nimeruumi prefiks (--color-*, --font-*, --breakpoint-*, --spacing-*, …) ütleb Tailwind-ile, milliseid utiliite ja variante see token mõjutab.

use TailwindPHP\tw;

$css = tw::generate('<div class="bg-brand text-brand xs:flex">', '
    @import "tailwindcss";

    @theme {
        --color-brand: #3b82f6;
        --font-heading: "Inter", sans-serif;
        --breakpoint-xs: 20rem;
        --spacing-huge: 10rem;
    }
');

Iga token registreerib oma nimeruumi all utiliidid. Ülaltoodud näide võimaldab kasutada bg-brand, text-brand, border-brand, perekonda font-heading, reageerivat varianti xs: ning vahekaugusi p-huge/m-huge — need luuakse ainult siis, kui vastav klass esineb sinu sisus.

/* bg-brand resolves to the theme variable */
:root, :host {
  --color-brand: #3b82f6;
}
.bg-brand {
  background-color: var(--color-brand);
}

Token --breakpoint-xs registreerib variandi xs: otse:

@media (min-width: 20rem) {
  .xs\:flex {
    display: flex;
  }
}

Levinud nimeruumid

Nimeruumi tühjendamine

Nimeruumi metamärgi väärtuseks initial määramine eemaldab enne sinu tokenite lisamist Tailwind vaikimisi väärtused sellest nimeruumist. Nii saad alustada puhtalt paletilt:

@theme {
    /* Drop every default color, then define only what you need */
    --color-*: initial;
    --color-brand: #3b82f6;
    --color-ink: #111827;
}

--*: initial; tühjendab kogu teema. Väärtus initial metamärgita võtmel (--color-red-500: initial;) eemaldab ainult selle ühe tokeni. Metamärgiga võtme -* väärtusena aktsepteeritakse ainult initial — muu väärtuse korral tekib viga.

Teemaväärtuste lugemine CSS-is

theme()

Pärandfunktsioon theme() loeb väärtuse v3-stiilis nimeruumidest punktkirja abil. See lahendatakse kompileerimise ajal tokeni väärtuseks, seega saab seda kasutada kõikjal, kus väärtus on lubatud — ka kohandatud reeglites ja muudes deklaratsioonides.

$css = tw::generate('<div class="callout">', '
    @import "tailwindcss";
    .callout { color: theme(colors.red.500); }
');

.callout {
  color: oklch(63.7% .237 25.331);
}

Punktteed osutavad aluseks olevatele muutujatele (colors.red.500 → --color-red-500, fontFamily.sans → sans-serif-perekond). Toetatud on läbipaistmatuse modifikaator: theme(colors.red.500 / 50%). Varuväärtuse saab anda teise argumendina: theme(colors.brand, #000). Kui teed ei saa lahendada ja varuväärtust pole antud, jäetakse seda kasutav kandidaat välja.

--theme()

--theme() loeb teema muutujat selle CSS kohandatud atribuudi nime järgi ja tagastab vaikimisi viite kujul var(), nii et väärtust saab käitusajal endiselt üle kirjutada:

.btn { color: --theme(--color-brand); }
/* → color: var(--color-brand); */

Lisage inline, et asendada viide kujul var() lahendatud väärtusega: --theme(--color-brand inline). Teine argument on varuväärtus (--theme(--color-brand, #000)); initial varuväärtust käsitletakse eriliselt — see lisatakse pesastatud viidetesse var(), mis lahenduvad samuti väärtuseks initial. At-reegli sees (@media, @container) lahendab --theme() alati väärtuse otse, sest var() ei kehti nendes eesosades.

--spacing()

--spacing(n) korrutab teema baasvaheühiku (--spacing) väärtusega n:

@utility my-gap { gap: --spacing(4); }
/* → gap: calc(var(--spacing) * 4); */

Kordaja 1 lahendub baasmuutujaks endaks (--spacing(1) → var(--spacing), mille väljastab ka p-1) ja 0 tavaliseks nullpikkuseks.

See on sama arvutus, mida kasutavad sisseehitatud vaheutiliidid, nii et kohandatud väärtused jäävad kooskõlla väärtustega p-4, m-4 ja teistega.

--alpha()

--alpha(color / opacity) rakendab värvile läbipaistmatuse, kasutades oklabi värviruumis väärtust color-mix():

@utility tint { color: --alpha(var(--color-red-500) / 50%); }

.tint {
  color: #fb2c3680;
}
@supports (color: color-mix(in lab, red, red)) {
  .tint {
    color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
  }
}

Kuju color-mix() jääb käitusajal üle kirjutatavaks; sellest eespool olev teemaväärtuse põhjal arvutatud staatiline varuväärtus katab brauserid, mis ei toeta color-mix(). Lülitage varuväärtus välja valikuga polyfills: tw::compile().

Läbipaistmatuse ja color-mix() kuhjamine → oklab()

Läbipaistmatuse modifikaatorid liituvad. 50% rakendamine väärtusele, mille läbipaistmatus on juba 50%, annab oklabis arvutatud tulemuseks 25%. Kui läbipaistmatuse modifikaator rakendub staatilisele värvile, liidab TailwindPHP avaldise color-mix(in oklab, …) konkreetseks väärtuseks oklab() — sama teisenduse teeb lightningcss ülemises Tailwind tööriistaahelas —, dünaamilised värvid (need, mis on endiselt pakitud kujule var()) säilitavad aga kuju color-mix(), nii et neid saab käitusajal üle kirjutada.

Teemaväärtuste lugemine PHP kaudu

Kolm ligipääsufunktsiooni tagastavad lahendatud teemaväärtused PHP massiividena. Igaühele saab anda valikulise sisendi CSS stringina (vaikimisi @import "tailwindcss";) ning need on saadaval ka kompilaatori eksemplaril.

use TailwindPHP\tw;

tw::colors();
// ['red-500' => 'oklch(63.7% .237 25.331)', 'blue-500' => 'oklch(62.3% .214 259.815)', ...]

tw::breakpoints();
// ['sm' => '40rem', 'md' => '48rem', 'lg' => '64rem', 'xl' => '80rem', '2xl' => '96rem']

tw::spacing('@import "tailwindcss"; @theme { --spacing-huge: 10rem; }');
// ['huge' => '10rem']

Kohandatud teema põhjal lugemiseks andke ette string CSS:

tw::colors('@import "tailwindcss"; @theme { --color-brand: #3b82f6; }');
// [..., 'brand' => '#3b82f6']

tw::breakpoints('@import "tailwindcss"; @theme { --breakpoint-xs: 20rem; }');
// ['sm' => '40rem', ..., '2xl' => '96rem', 'xs' => '20rem']

TailwindCSS 4 kasutab skaalas --spacing-* ühe baasväärtuse asemel väärtust --spacing, seega tagastab tw::spacing() ainult teie määratletud kohandatud märgid --spacing-*. Samad meetodid on olemas ka kompilaatori eksemplaril: $compiler->colors(), $compiler->breakpoints(), $compiler->spacing(). Täielikud signatuurid leiate API.

Järgmised sammud

• Direktiivid — @apply, @utility, @custom-variant, @layer.
• Impordid — @import, virtuaalmoodulid ja Preflight.
• API — kõik ligipääsumeetodid ja kontrollimeetodid.