Tema ir tinkinimas

Tailwind tema yra plokščias CSS kintamųjų rinkinys. Ją išplėsite arba pakeisite įvesties CSS faile esančiu @theme { … } bloku, jo reikšmes nurodysite iš CSS naudodami temos funkcijas, o išspręstas reikšmes nuskaitysite iš PHP. Atskiro JavaScript konfigūracijos failo nėra — tema apibrėžiama tik CSS.

Blokas @theme

@theme blokas apibrėžia dizaino žetonus kaip CSS pasirinktines ypatybes. Kiekvieno kintamojo vardų srities priešdėlis (--color-*, --font-*, --breakpoint-*, --spacing-*, …) nurodo Tailwind, kurias pagalbines klases ir variantus žetonas papildo.

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;
    }
');

Kiekvienas žetonas savo vardų srityje užregistruoja pagalbines klases. Aukščiau pateiktame pavyzdyje sukuriami bg-brand, text-brand, border-brand, šeima font-heading, adaptyvusis variantas xs: ir tarpai p-huge/m-huge — jie generuojami tik tada, kai klasė pasirodo turinyje.

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

Žetonas --breakpoint-xs tiesiogiai užregistruoja variantą xs::

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

Įprastos vardų sritys

Vardų srities išvalymas

Nustačius vardų srities pakaitos simbolį į initial, pašalinamos numatytosios Tailwind reikšmės toje vardų srityje prieš pridedant jūsų žetonus. Taip galima pradėti nuo tuščios paletės:

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

--*: initial; išvalo visą temą. Viena initial reikšmė ne pakaitos simbolio rakte (--color-red-500: initial;) pašalina tik tą žetoną. Pakaitos simbolio -* reikšmė gali būti tik initial — bet kuri kita reikšmė yra klaida.

Temos reikšmių skaitymas CSS

theme()

Senoji funkcija theme() nuskaito reikšmę pagal taškų žymėjimą, naudodama v3 stiliaus vardų sritis. Ji kompiliavimo metu grąžina žetono reikšmę, todėl ją galima naudoti visur, kur tikimasi reikšmės, įskaitant pasirinktines taisykles ir kitas deklaracijas.

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

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

Taškų keliai atitinka pagrindinius kintamuosius (colors.red.500 → --color-red-500, fontFamily.sans → sans šeima). Galima nurodyti nepermatomumo modifikatorių: theme(colors.red.500 / 50%). Kaip antrą argumentą galima perduoti atsarginę reikšmę: theme(colors.brand, #000). Jei kelio išspręsti nepavyksta ir atsarginė reikšmė nenurodyta, kandidatas, kuriame jis naudojamas, atmetamas.

--theme()

--theme() nuskaito temos kintamąjį pagal pasirinktinės ypatybės pavadinimą CSS ir pagal numatytuosius nustatymus grąžina nuorodą var(), todėl reikšmę galima keisti vykdymo metu:

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

Pridėkite inline, kad vietoj nuorodos var() būtų įterpta išspręsta reikšmė: --theme(--color-brand inline). Antrasis argumentas yra atsarginė reikšmė (--theme(--color-brand, #000)), o atsarginė initial reikšmė apdorojama specialiai — ji įterpiama į įdėtas var() nuorodas, kurios pačios išsprendžiamos į initial. At-rule viduje (@media, @container) --theme() visada išsprendžiama tiesiogiai, nes var() tokiose preambulėse negalioja.

--spacing()

--spacing(n) padaugina bazinį temos tarpų vienetą (--spacing) iš n:

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

Kai daugiklis yra 1, grąžinamas pats bazinis kintamasis (--spacing(1) → var(--spacing), taip pat išveda ir p-1), o 0 atveju gaunamas paprastas nulinis ilgis.

Tai tas pats skaičiavimas, kurį naudoja įtaisytosios tarpų pagalbinės klasės, todėl pasirinktinės reikšmės išlieka suderinamos su p-4, m-4 ir panašiomis.

--alpha()

--alpha(color / opacity) pritaiko spalvai nepermatomumą naudodama color-mix() oklab spalvų erdvėje:

@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);
  }
}

Forma color-mix() išlieka keičiama vykdymo metu; prieš ją esanti statinė atsarginė reikšmė, apskaičiuota pagal temos reikšmę, skirta naršyklėms be color-mix(). Atsarginę reikšmę išjunkite parinktimi polyfills, esančia tw::compile().

Nepermatomumo ir color-mix() → oklab() derinimas

Nepermatomumo modifikatoriai sudedami. Pritaikius 50 % reikšmei, kurioje jau yra 50 %, gaunama 25 %; skaičiuojama oklab erdvėje. Kai nepermatomumo modifikatorius taikomas statinei spalvai, TailwindPHP išraišką color-mix(in oklab, …) supaprastina iki konkrečios reikšmės oklab() — taip pat, kaip lightningcss atlieka šią konversiją pradinėje įrankių grandinėje Tailwind. Dinaminės spalvos (vis dar apgaubtos var()) išlaiko formą color-mix(), todėl jas galima keisti vykdymo metu.

Temos reikšmių skaitymas iš PHP

Trys prieigos metodai grąžina išspręstas temos reikšmes kaip PHP masyvus. Kiekvienas priima pasirenkamą įvesties eilutę CSS (numatytoji reikšmė @import "tailwindcss";); juos taip pat galima naudoti su kompiliatoriaus egzemplioriumi.

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

Norėdami nuskaityti tinkintos temos reikšmes, perduokite CSS eilutę:

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 naudoja vieną bazinę --spacing reikšmę, o ne --spacing-* skalę, todėl tw::spacing() grąžina tik jūsų apibrėžtus tinkintus --spacing-* žetonus. Tie patys metodai prieinami ir iš kompiliatoriaus egzemplioriaus: $compiler->colors(), $compiler->breakpoints(), $compiler->spacing(). Visus parašus rasite API.

Tolesni veiksmai

• Direktyvos — @apply, @utility, @custom-variant, @layer.
• Importai — @import, virtualūs moduliai ir Preflight.
• API — visi prieigos ir tikrinimo metodai.