# Teema ja kohandamine

Tailwind teema on tasane kogum CSS-muutujaid. Saad seda täiendada või asendada sisendi CSS-is oleva plokiga `@theme { … }`, viidata nendele väärtustele CSS sees teemafunktsioonide abil ning lugeda lahendatud väärtused moodulist PHP. JavaScript konfiguratsioonifaili pole — teema asub täielikult CSS-is.

## Plokk `@theme`

Plokk `@theme` määrab kujundustokenid CSS kohandatud atribuutidena. Iga muutuja nimeruumi prefiks (`--color-*`, `--font-*`, `--breakpoint-*`, `--spacing-*`, …) ütleb Tailwind-ile, milliseid utiliite ja variante see token mõjutab.

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

Iga token registreerib oma nimeruumi all utiliidid. Ülaltoodud näide võimaldab kasutada `bg-brand`, `text-brand`, `border-brand`, perekonda `font-heading`, reageerivat varianti `xs:` ning vahekaugusi `p-huge`/`m-huge` — need luuakse ainult siis, kui vastav klass esineb sinu sisus.

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

Token `--breakpoint-xs` registreerib variandi `xs:` otse:

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

### Levinud nimeruumid

| Nimeruum | Mõjutab |
|-----------|-------|
| `--color-*` | `bg-*`, `text-*`, `border-*`, `fill-*`, `stroke-*`, … |
| `--font-*` | perekonna `font-*` utiliidid |
| `--text-*` | fondisuuruse utiliidid `text-*` |
| `--breakpoint-*` | reageerivad variandid (`sm:`, `md:`, kohandatud `xs:`) |
| `--spacing-*` | nimega vahekaugused (`p-huge`, `m-huge`) |
| `--radius-*` | utiliidid `rounded-*` |
| `--shadow-*` | utiliidid `shadow-*` |

### Nimeruumi tühjendamine

Nimeruumi metamärgi väärtuseks `initial` määramine eemaldab enne sinu tokenite lisamist Tailwind vaikimisi väärtused sellest nimeruumist. Nii saad alustada puhtalt paletilt:

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

`--*: initial;` tühjendab kogu teema. Väärtus `initial` metamärgita võtmel (`--color-red-500: initial;`) eemaldab ainult selle ühe tokeni. Metamärgiga võtme `-*` väärtusena aktsepteeritakse ainult `initial` — muu väärtuse korral tekib viga.

## Teemaväärtuste lugemine CSS-is

### `theme()`

Pärandfunktsioon `theme()` loeb väärtuse v3-stiilis nimeruumidest punktkirja abil. See lahendatakse kompileerimise ajal tokeni väärtuseks, seega saab seda kasutada kõikjal, kus väärtus on lubatud — ka kohandatud reeglites ja muudes deklaratsioonides.

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

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

Punktteed osutavad aluseks olevatele muutujatele (`colors.red.500` → `--color-red-500`, `fontFamily.sans` → sans-serif-perekond). Toetatud on läbipaistmatuse modifikaator: `theme(colors.red.500 / 50%)`. Varuväärtuse saab anda teise argumendina: `theme(colors.brand, #000)`. Kui teed ei saa lahendada ja varuväärtust pole antud, jäetakse seda kasutav kandidaat välja.

### `--theme()`

`--theme()` loeb teema muutujat selle CSS kohandatud atribuudi nime järgi ja tagastab vaikimisi viite kujul `var()`, nii et väärtust saab käitusajal endiselt üle kirjutada:

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

Lisage `inline`, et asendada viide kujul `var()` lahendatud väärtusega: `--theme(--color-brand inline)`. Teine argument on varuväärtus (`--theme(--color-brand, #000)`); `initial` varuväärtust käsitletakse eriliselt — see lisatakse pesastatud viidetesse `var()`, mis lahenduvad samuti väärtuseks `initial`. At-reegli sees (`@media`, `@container`) lahendab `--theme()` alati väärtuse otse, sest `var()` ei kehti nendes eesosades.

### `--spacing()`

`--spacing(n)` korrutab teema baasvaheühiku (`--spacing`) väärtusega `n`:

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

Kordaja `1` lahendub baasmuutujaks endaks (`--spacing(1)` → `var(--spacing)`, mille väljastab ka `p-1`) ja `0` tavaliseks nullpikkuseks.

See on sama arvutus, mida kasutavad sisseehitatud vaheutiliidid, nii et kohandatud väärtused jäävad kooskõlla väärtustega `p-4`, `m-4` ja teistega.

### `--alpha()`

`--alpha(color / opacity)` rakendab värvile läbipaistmatuse, kasutades oklabi värviruumis väärtust `color-mix()`:

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

Kuju `color-mix()` jääb käitusajal üle kirjutatavaks; sellest eespool olev teemaväärtuse põhjal arvutatud staatiline varuväärtus katab brauserid, mis ei toeta `color-mix()`. Lülitage varuväärtus välja valikuga `polyfills`: [`tw::compile()`](https://tailwindphp.inline0.dev/et/docs/api#twcompile).

### Läbipaistmatuse ja `color-mix()` kuhjamine → `oklab()`

Läbipaistmatuse modifikaatorid liituvad. 50% rakendamine väärtusele, mille läbipaistmatus on juba 50%, annab oklabis arvutatud tulemuseks 25%. Kui läbipaistmatuse modifikaator rakendub staatilisele värvile, liidab TailwindPHP avaldise `color-mix(in oklab, …)` konkreetseks väärtuseks `oklab()` — sama teisenduse teeb lightningcss ülemises Tailwind tööriistaahelas —, dünaamilised värvid (need, mis on endiselt pakitud kujule `var()`) säilitavad aga kuju `color-mix()`, nii et neid saab käitusajal üle kirjutada.

## Teemaväärtuste lugemine PHP kaudu

Kolm ligipääsufunktsiooni tagastavad lahendatud teemaväärtused PHP massiividena. Igaühele saab anda valikulise sisendi CSS stringina (vaikimisi `@import "tailwindcss";`) ning need on saadaval ka [kompilaatori eksemplaril](https://tailwindphp.inline0.dev/et/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']
```

Kohandatud teema põhjal lugemiseks andke ette string 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 kasutab skaalas `--spacing-*` ühe baasväärtuse asemel väärtust `--spacing`, seega tagastab `tw::spacing()` ainult teie määratletud kohandatud märgid `--spacing-*`. Samad meetodid on olemas ka kompilaatori eksemplaril: `$compiler->colors()`, `$compiler->breakpoints()`, `$compiler->spacing()`. Täielikud signatuurid leiate [API](https://tailwindphp.inline0.dev/et/docs/api).

## Järgmised sammud

- [Direktiivid](https://tailwindphp.inline0.dev/et/docs/usage/directives) — `@apply`, `@utility`, `@custom-variant`, `@layer`.
- [Impordid](https://tailwindphp.inline0.dev/et/docs/usage/imports) — `@import`, virtuaalmoodulid ja Preflight.
- [API](https://tailwindphp.inline0.dev/et/docs/api) — kõik ligipääsumeetodid ja kontrollimeetodid.