# Téma a úpravy

Téma Tailwind tvoří plochá sada proměnných CSS. Rozšiřte ji nebo nahraďte blokem `@theme { … }` ve vstupním CSS, na tyto hodnoty odkazujte uvnitř CSS pomocí funkcí tématu a vyřešené hodnoty načtěte zpět z PHP. Neexistuje žádný konfigurační soubor JavaScript — celé téma je uloženo v CSS.

## Blok `@theme`

Blok `@theme` deklaruje návrhové tokeny jako vlastní vlastnosti CSS. Prefix jmenného prostoru každé proměnné (`--color-*`, `--font-*`, `--breakpoint-*`, `--spacing-*`, …) určuje, které utility a varianty token ovlivní v Tailwind.

```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 utility pod svým jmenným prostorem. Příklad výše zpřístupní `bg-brand`, `text-brand`, `border-brand`, skupinu `font-heading`, responzivní variantu `xs:` a rozestupy `p-huge`/`m-huge` — vygenerují se pouze tehdy, když se třída objeví v obsahu.

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

Token `--breakpoint-xs` registruje variantu `xs:` přímo:

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

### Běžné jmenné prostory

| Jmenný prostor | Zpřístupňuje |
|-----------|-------|
| `--color-*` | `bg-*`, `text-*`, `border-*`, `fill-*`, `stroke-*`, … |
| `--font-*` | utility skupiny `font-*` |
| `--text-*` | utility pro velikost písma `text-*` |
| `--breakpoint-*` | responzivní varianty (`sm:`, `md:`, vlastní `xs:`) |
| `--spacing-*` | pojmenované hodnoty rozestupů (`p-huge`, `m-huge`) |
| `--radius-*` | utility `rounded-*` |
| `--shadow-*` | utility `shadow-*` |

### Vymazání jmenného prostoru

Nastavením zástupného znaku jmenného prostoru na `initial` se před přidáním vlastních tokenů odstraní výchozí hodnoty Tailwind pro daný prostor. Můžete tak začít 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éma. Jedna hodnota `initial` u klíče bez zástupného znaku (`--color-red-500: initial;`) odstraní pouze daný token. Jako hodnota zástupného znaku `-*` je povoleno pouze `initial` — jakákoli jiná hodnota způsobí chybu.

## Čtení hodnot tématu v CSS

### `theme()`

Zastaralá funkce `theme()` načítá hodnotu pomocí tečkové notace v jmenných prostorech ve stylu v3. Hodnotu tokenu vyhodnotí při kompilaci, takže ji lze použít všude, kde se očekává hodnota — včetně vlastních pravidel a dalších deklarací.

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

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

Cesty s tečkami odpovídají podkladovým proměnným (`colors.red.500` → `--color-red-500`, `fontFamily.sans` → rodina bezpatkových písem). Podporován je modifikátor opacity: `theme(colors.red.500 / 50%)`. Náhradní hodnotu lze předat jako druhý argument: `theme(colors.brand, #000)`. Pokud cestu nelze vyřešit a není zadána náhradní hodnota, kandidát, který ji používá, se vyřadí.

### `--theme()`

`--theme()` načítá proměnnou tématu podle názvu její vlastní vlastnosti CSS a ve výchozím nastavení vrací odkaz `var()`, takže lze hodnotu za běhu přepsat:

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

Přidejte `inline`, chcete-li místo odkazu `var()` dosadit vyřešenou hodnotu: `--theme(--color-brand inline)`. Druhý argument představuje náhradní hodnotu (`--theme(--color-brand, #000)`); náhradní hodnota `initial` se zpracovává zvláštním způsobem — vloží se do vnořených odkazů `var()`, které samy odkazují na `initial`. Uvnitř pravidla at (`@media`, `@container`) se `--theme()` vždy vyhodnotí přímo, protože `var()` není v těchto uvozujících částech platné.

### `--spacing()`

`--spacing(n)` násobí základní jednotku rozestupů tématu (`--spacing`) číslem `n`:

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

Násobitel `1` odpovídá samotné základní proměnné (`--spacing(1)` → `var(--spacing)`, což také generuje `p-1`); `0` pak odpovídá nulové délce.

Jde o stejný výpočet, který používají vestavěné utility rozestupů, takže vlastní hodnoty zůstávají v souladu s `p-4`, `m-4` a dalšími.

### `--alpha()`

`--alpha(color / opacity)` nastaví krytí barvy pomocí `color-mix()` v barevném prostoru 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);
  }
}
```

Tvar `color-mix()` lze za běhu přepsat; statická náhradní hodnota před ním, vypočtená z hodnoty tématu, zajišťuje podporu prohlížečů bez `color-mix()`. Náhradní hodnotu vypnete volbou `polyfills` v [`tw::compile()`](https://tailwindphp.inline0.dev/cs/docs/api#twcompile).

### Kombinování opacity a `color-mix()` → `oklab()`

Modifikátory opacity se skládají. Přidání 50 % k hodnotě, která už má 50 %, dá 25 %; výpočet probíhá v oklab. Když se modifikátor opacity použije na statickou barvu, TailwindPHP zjednoduší výraz `color-mix(in oklab, …)` na konkrétní hodnotu `oklab()` — stejný převod provádí lightningcss v upstream nástrojovém řetězci Tailwind. Dynamické barvy (stále zabalené v `var()`) si ponechají tvar `color-mix()`, aby je bylo možné přepisovat za běhu.

## Čtení hodnot tématu z PHP

Tři přístupové metody vracejí vyřešené hodnoty tématu jako pole PHP. Každá přijímá volitelný vstupní řetězec CSS (výchozí hodnota `@import "tailwindcss";`) a je dostupná také na [instanci kompilátoru](https://tailwindphp.inline0.dev/cs/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']
```

Pro načtení hodnot z upraveného tématu předejte řetězec 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žívá jedinou základní hodnotu `--spacing` místo škály `--spacing-*`, takže `tw::spacing()` vrací pouze vlastní tokeny `--spacing-*`, které definujete. Stejné metody jsou dostupné i na instanci kompilátoru: `$compiler->colors()`, `$compiler->breakpoints()`, `$compiler->spacing()`. Úplné signatury najdete v [API](https://tailwindphp.inline0.dev/cs/docs/api).

## Další kroky

- [Directives](https://tailwindphp.inline0.dev/cs/docs/usage/directives) — `@apply`, `@utility`, `@custom-variant`, `@layer`.
- [Imports](https://tailwindphp.inline0.dev/cs/docs/usage/imports) — `@import`, virtuální moduly a Preflight.
- [API](https://tailwindphp.inline0.dev/cs/docs/api) — všechny přístupové metody a metody kontroly.