Téma és testreszabás

A Tailwind témája CSS változók lapos készlete. A bemeneti CSS-ban lévő @theme { … } blokkal bővítheti vagy lecserélheti, az értékekre a CSS belsejéből hivatkozhat a témához tartozó függvényekkel, a feloldott értékeket pedig a PHP-ból olvashatja ki. Nincs külön JavaScript konfigurációs fájl; a téma teljes egészében a CSS-ban található.

A @theme blokk

A @theme blokk tervezési tokeneket deklarál CSS egyéni tulajdonságként. Az egyes változók névtér-előtagja (--color-*, --font-*, --breakpoint-*, --spacing-* stb.) jelzi a Tailwind számára, hogy a token mely segédosztályokat és változatokat szolgálja ki.

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

Minden token a saját névtere alatt regisztrál segédosztályokat. A fenti példa elérhetővé teszi a bg-brand, a text-brand és a border-brand osztályt, a font-heading családot, egy xs: reszponzív változatot, valamint a p-huge/m-huge térközöket; ezek csak akkor jönnek létre, ha az osztály szerepel a tartalomban.

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

A --breakpoint-xs token közvetlenül regisztrálja a xs: változatot:

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

Gyakori névterek

Névtér alapértelmezéseinek törlése

Ha egy névtér helyettesítő karakterének értéke initial, akkor a rendszer eltávolítja a Tailwind alapértelmezéseit az adott névtérből, mielőtt hozzáadná az Ön tokenjeit. Így tiszta palettáról indulhat:

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

A --*: initial; a teljes témát törli. Ha egy nem helyettesítő kulcs (--color-red-500: initial;) értéke initial, csak az adott token törlődik. A initial érték használható egy -* helyettesítő kulcs értékeként; minden más érték hibát okoz.

Témaértékek beolvasása a CSS-ban

theme()

Az örökölt theme() függvény pontozott jelöléssel olvas be egy értéket a v3-stílusú névterekből. Fordításkor feloldja a token értékére, ezért bárhol használható, ahol érték várható, így egyéni szabályokban és más deklarációkban is.

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

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

A pontozott útvonalak az alapul szolgáló változókra képeződnek le (colors.red.500 → --color-red-500, fontFamily.sans → a sans család). Az átlátszatlanság módosítója is támogatott: theme(colors.red.500 / 50%). Tartalékérték második argumentumként adható meg: theme(colors.brand, #000). Ha egy útvonal nem oldható fel, és nincs megadva tartalékérték, az azt használó jelölt kimarad.

--theme()

A --theme() a téma változóját annak CSS egyéni tulajdonságneve alapján olvassa be, és alapértelmezés szerint var() hivatkozást ad vissza, így az érték futás közben felülbírálható marad:

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

A feloldott érték behelyettesítéséhez inline adható meg var() hivatkozás helyett: --theme(--color-brand inline). A második argumentum a tartalékérték (--theme(--color-brand, #000)), az initial tartalékérték kezelése pedig speciális: a rendszer beilleszti a beágyazott var() hivatkozásokba, amelyek maguk is initial értékre oldódnak fel. At-szabályon belül (@media, @container) a --theme() mindig közvetlenül oldódik fel, mert az var() nem érvényes ezekben az előtagokban.

--spacing()

A --spacing(n) megszorozza a téma alap térközegységét (--spacing) a következővel: n

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

A 1 szorzó az alapváltozóra oldódik fel (--spacing(1) → var(--spacing), ezt adja ki a p-1 is), a 0 pedig egyszerű, nulla hosszúságú értékre.

Ez ugyanaz a számítás, amelyet a beépített térközsegédprogramok használnak, így az egyéni értékek összhangban maradnak a következőkkel: p-4, m-4 és a hasonlókkal.

--alpha()

A --alpha(color / opacity) a color-mix() használatával alkalmaz átlátszatlanságot egy színre az oklab színtérben:

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

A color-mix() alak futás közben felülbírálható marad; az előtte lévő, témaértékből számított statikus tartalékérték olyan böngészőkben is működik, amelyek nem támogatják a color-mix() használatát. A tartalékérték kikapcsolásához használd a tw::compile() polyfills beállítását.

Az átlátszatlanság és a color-mix() egymásra rétegezése → oklab()

Az átlátszatlanság-módosítók összeadódnak. Ha egy már 50%-os értékre újabb 50%-ot alkalmazunk, az eredmény 25%, oklab színtérben számítva. Amikor egy átlátszatlanság-módosító statikus színre oldódik fel, a TailwindPHP a color-mix(in oklab, …) kifejezést konkrét oklab() értékké alakítja – ugyanazzal a konverzióval, amelyet az upstream Tailwind eszközlánc végez –, míg a dinamikus színek (amelyek továbbra is var() formában vannak becsomagolva) megtartják a color-mix() alakot, hogy futás közben felülbírálhatók maradjanak.

Témaértékek beolvasása innen: PHP

Három elérő a feloldott témaértékeket PHP tömbökként adja vissza. Mindegyikhez megadható egy opcionális bemeneti CSS karakterlánc (alapértelmezés: @import "tailwindcss";), és mindhárom elérhető egy fordító példányán is.

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

Egy CSS karakterlánccal egy testreszabott témából olvashatsz be értékeket:

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

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

A TailwindCSS 4 egyetlen --spacing alapértéket használ a --spacing-* skála helyett, ezért a tw::spacing() csak az általad meghatározott egyéni --spacing-* tokeneket adja vissza. Fordító példányán ugyanezek a metódusok érhetők el: $compiler->colors(), $compiler->breakpoints(), $compiler->spacing(). A teljes szignatúrákért lásd a API dokumentációt.

Következő lépések

• Direktívák – @apply, @utility, @custom-variant, @layer.
• Importok – @import, virtuális modulok és Preflight.
• API – minden elérő és vizsgálati metódus.