Téma a prispôsobenie

Téma Tailwind tvorí plochá množina premenných CSS. Rozšírte alebo nahraďte ju blokom @theme { … } vo vstupnom CSS, na tieto hodnoty odkazujte z CSS pomocou funkcií témy a vyriešené hodnoty čítajte z PHP. Súbor konfigurácie JavaScript neexistuje — téma je celá uložená v CSS.

Blok @theme

Blok @theme deklaruje dizajnové tokeny ako vlastné vlastnosti CSS. Predpona menného priestoru každej premennej (--color-*, --font-*, --breakpoint-*, --spacing-*, …) určuje, ktoré nástroje a varianty Tailwind tento token využijú.

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

Každý token registruje nástroje vo svojom mennom priestore. Uvedený príklad sprístupňuje bg-brand, text-brand, border-brand, rodinu font-heading, responzívny variant xs: a rozostupy p-huge/m-huge — generujú sa iba vtedy, keď sa trieda objaví vo vašom obsahu.

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

Token --breakpoint-xs priamo registruje variant xs::

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

Bežné menné priestory

Vymazanie menného priestoru

Nastavením zástupného znaku menného priestoru na initial odstránite predvolené hodnoty Tailwind pre daný priestor ešte pred pridaním vlastných tokenov. Takto môžete začať s čistou paletou:

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

--*: initial; vymaže celú tému. Jedna hodnota initial pri kľúči bez zástupného znaku (--color-red-500: initial;) odstráni iba daný token. Ako hodnota zástupného znaku -* je povolené iba initial — akákoľvek iná hodnota spôsobí chybu.

Čítanie hodnôt témy v CSS

theme()

Zastaranejšia funkcia theme() číta hodnotu pomocou bodkového zápisu v menných priestoroch v štýle v3. Hodnotu tokenu vyrieši počas kompilácie, takže ju možno použiť všade, kde sa očakáva hodnota — vrátane vlastných pravidiel a ďalších deklarácií.

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

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

Bodkové cesty zodpovedajú podkladovým premenným (colors.red.500 → --color-red-500, fontFamily.sans → rodina bezpätkových písiem). Podporovaný je modifikátor nepriehľadnosti: theme(colors.red.500 / 50%). Záložnú hodnotu možno odovzdať ako druhý argument: theme(colors.brand, #000). Ak cestu nemožno vyriešiť a záložná hodnota chýba, kandidát, ktorý ju používa, sa zahodí.

--theme()

--theme() číta premennú témy podľa názvu jej vlastnej vlastnosti CSS a predvolene vracia odkaz var(), takže hodnotu možno prepísať za behu:

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

Pridajte inline, aby sa namiesto odkazu var() dosadila vyriešená hodnota: --theme(--color-brand inline). Druhý argument je záložná hodnota (--theme(--color-brand, #000)); záložná hodnota initial sa spracúva osobitne — vloží sa do vnorených odkazov var(), ktoré sa samy vyhodnotia na initial. Vo vnútri pravidla at (@media, @container) sa --theme() vždy vyhodnotí priamo, pretože var() v týchto úvodoch pravidiel nie je platné.

--spacing()

--spacing(n) násobí základnú jednotku rozostupov témy (--spacing) číslom n:

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

Násobiteľ 1 sa vyhodnotí priamo na základnú premennú (--spacing(1) → var(--spacing), čo generuje aj p-1) a 0 na nulovú dĺžku.

Ide o rovnaký výpočet ako pri vstavaných nástrojoch na rozostupy, takže vlastné hodnoty zostávajú konzistentné s p-4, m-4 a podobnými nástrojmi.

--alpha()

--alpha(color / opacity) nastavuje nepriehľadnosť farby pomocou color-mix() vo farebnom priestore oklab:

@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() sa dá prepísať za behu; statická záložná hodnota pred ňou, vypočítaná z hodnoty témy, pokrýva prehliadače bez podpory color-mix(). Záložnú hodnotu vypnete pomocou možnosti polyfills v tw::compile().

Kombinovanie nepriehľadnosti a color-mix() → oklab()

Modifikátory nepriehľadnosti sa skladajú. Nastavenie 50 % na hodnotu, ktorá už má 50 %, vedie k 25 % vypočítaným v oklab. Keď sa modifikátor nepriehľadnosti vyhodnocuje vzhľadom na statickú farbu, TailwindPHP zjednoduší výraz color-mix(in oklab, …) na konkrétnu hodnotu oklab() — rovnako ako pri tejto konverzii postupuje nástroj Tailwind v nadradenom reťazci nástrojov — zatiaľ čo dynamické farby (tie, ktoré sú stále zabalené v var()) si zachovajú formu color-mix(), aby ich bolo možné prepísať za behu.

Čítanie hodnôt témy z PHP

Tri prístupové metódy vracajú vyriešené hodnoty témy ako polia PHP. Každá prijíma voliteľný vstupný reťazec CSS (predvolene @import "tailwindcss";) a je dostupná aj v inštancii kompilátora.

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

Ak chcete čítať upravenú tému, odovzdajte reťazec 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 používa jedinú základnú hodnotu --spacing namiesto stupnice --spacing-*, takže tw::spacing() vracia iba vlastné tokeny --spacing-*, ktoré definujete. Rovnaké metódy sú dostupné aj v inštancii kompilátora: $compiler->colors(), $compiler->breakpoints(), $compiler->spacing(). Úplné signatúry nájdete v API.

Ďalšie kroky

• Direktívy — @apply, @utility, @custom-variant, @layer.
• Importy — @import, virtuálne moduly a Preflight.
• API — všetky prístupové a kontrolné metódy.