# 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ú.

```php
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.

```css
/* 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:`:

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

### Bežné menné priestory

| Menný priestor | Poskytuje |
|-----------|-------|
| `--color-*` | `bg-*`, `text-*`, `border-*`, `fill-*`, `stroke-*`, … |
| `--font-*` | nástroje rodiny `font-*` |
| `--text-*` | nástroje pre veľkosť písma `text-*` |
| `--breakpoint-*` | responzívne varianty (`sm:`, `md:`, vlastný `xs:`) |
| `--spacing-*` | pomenované hodnoty rozostupov (`p-huge`, `m-huge`) |
| `--radius-*` | nástroje `rounded-*` |
| `--shadow-*` | nástroje `shadow-*` |

### 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:

```css
@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í.

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

```css
.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:

```css
.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`:

```css
@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:

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

```css
.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()`](https://tailwindphp.inline0.dev/sk/docs/api#twcompile).

### 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](https://tailwindphp.inline0.dev/sk/docs/api).

```php
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:

```php
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](https://tailwindphp.inline0.dev/sk/docs/api).

## Ďalšie kroky

- [Direktívy](https://tailwindphp.inline0.dev/sk/docs/usage/directives) — `@apply`, `@utility`, `@custom-variant`, `@layer`.
- [Importy](https://tailwindphp.inline0.dev/sk/docs/usage/imports) — `@import`, virtuálne moduly a Preflight.
- [API](https://tailwindphp.inline0.dev/sk/docs/api) — všetky prístupové a kontrolné metódy.