# Tema in prilagajanje

Tema za Tailwind je raven nabor spremenljivk CSS. Razširite ali zamenjate jo z blokom `@theme { … }` v vhodnem CSS, na te vrednosti se sklicujete znotraj CSS prek tematskih funkcij, razrešene vrednosti pa preberete iz PHP. Konfiguracijske datoteke JavaScript ni — tema je v celoti določena v CSS.

## Blok `@theme`

Blok `@theme` določa oblikovalske žetone kot lastnosti po meri CSS. Predpona imenskega prostora vsake spremenljivke (`--color-*`, `--font-*`, `--breakpoint-*`, `--spacing-*`, …) pove sistemu Tailwind, katere pripomočke in različice žeton napaja.

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

Vsak žeton registrira pripomočke v svojem imenskem prostoru. Zgornji primer omogoči `bg-brand`, `text-brand`, `border-brand`, družino `font-heading`, odzivno različico `xs:` ter razmike `p-huge`/`m-huge` — ustvarijo se samo, če se razred pojavi v vaši vsebini.

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

Žeton `--breakpoint-xs` neposredno registrira različico `xs:`:

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

### Pogosti imenski prostori

| Imenski prostor | Omogoča |
|-----------|-------|
| `--color-*` | `bg-*`, `text-*`, `border-*`, `fill-*`, `stroke-*`, … |
| `--font-*` | pripomočke družine `font-*` |
| `--text-*` | pripomočke za velikost pisave `text-*` |
| `--breakpoint-*` | odzivne različice (`sm:`, `md:`, po meri `xs:`) |
| `--spacing-*` | poimenovane vrednosti razmikov (`p-huge`, `m-huge`) |
| `--radius-*` | pripomočki `rounded-*` |
| `--shadow-*` | pripomočki `shadow-*` |

### Počiščenje imenskega prostora

Če nadomestni znak imenskega prostora nastavite na `initial`, se pred dodajanjem vaših žetonov odstranijo privzete vrednosti sistema Tailwind za ta imenski prostor. Tako lahko začnete s prazno paleto:

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

`--*: initial;` počisti celotno temo. Posamezna vrednost `initial` za ključ brez nadomestnega znaka (`--color-red-500: initial;`) odstrani samo ta žeton. Kot vrednost za nadomestni znak `-*` je sprejet samo `initial`; vsaka druga vrednost povzroči napako.

## Branje vrednosti teme v CSS

### `theme()`

Podedovana funkcija `theme()` bere vrednost z zapisom s pikami glede na imenske prostore sloga v3. Med prevajanjem se razreši v vrednost žetona, zato jo lahko uporabite povsod, kjer se pričakuje vrednost — tudi v pravilih po meri in drugih deklaracijah.

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

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

Poti s pikami se preslikajo v osnovne spremenljivke (`colors.red.500` → `--color-red-500`, `fontFamily.sans` → družina sans). Podprt je modifikator neprosojnosti: `theme(colors.red.500 / 50%)`. Nadomestno vrednost lahko podate kot drugi argument: `theme(colors.brand, #000)`. Če poti ni mogoče razrešiti in nadomestna vrednost ni podana, se kandidat, ki jo uporablja, izpusti.

### `--theme()`

`--theme()` prebere spremenljivko teme po imenu njene lastnosti po meri CSS in privzeto vrne referenco `var()`, zato lahko vrednost preglasite med izvajanjem:

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

Dodajte `inline`, da se uporabi razrešena vrednost namesto reference `var()`: `--theme(--color-brand inline)`. Drugi argument je nadomestna vrednost (`--theme(--color-brand, #000)`), nadomestna vrednost `initial` pa je obravnavana posebej — vstavi se v ugnezdene reference `var()`, ki se same razrešijo v `initial`. Znotraj pravila at (`@media`, `@container`) se `--theme()` vedno razreši neposredno, ker `var()` v teh uvodih ni veljaven.

### `--spacing()`

`--spacing(n)` pomnoži osnovno enoto razmika teme (`--spacing`) z `n`:

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

Množitelj `1` se razreši v samo osnovno spremenljivko (`--spacing(1)` → `var(--spacing)`, kar izpiše tudi `p-1`), `0` pa v navadno dolžino nič.

Gre za enak izračun kot pri vgrajenih pripomočkih za razmik, zato so vrednosti po meri skladne s `p-4`, `m-4` in podobnimi.

### `--alpha()`

`--alpha(color / opacity)` uporabi barvno neprosojnost z `color-mix()` v barvnem 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);
  }
}
```

Oblika `color-mix()` omogoča preglasitev med izvajanjem; statična nadomestna vrednost pred njo, izračunana iz vrednosti teme, pokriva brskalnike brez `color-mix()`. Nadomestno vrednost izklopite z možnostjo `polyfills` za [`tw::compile()`](https://tailwindphp.inline0.dev/sl/docs/api#twcompile).

### Združevanje neprosojnosti in `color-mix()` → `oklab()`

Modifikatorji neprosojnosti se seštevajo. Če na vrednost, ki že vsebuje 50 %, uporabite 50 %, dobite 25 %, izračunano v oklab. Ko se modifikator neprosojnosti razreši glede na statično barvo, TailwindPHP skrči izraz `color-mix(in oklab, …)` v konkretno vrednost `oklab()` — enako pretvorbo izvaja lightningcss v verigi orodij Tailwind — dinamične barve (ki so še vedno ovite v `var()`) pa ohranijo obliko `color-mix()` in tako ostanejo preglasljive med izvajanjem.

## Branje vrednosti teme iz PHP

Trije dostopniki vrnejo razrešene vrednosti teme kot polja PHP. Vsak sprejme izbirni vhodni niz CSS (privzeto `@import "tailwindcss";`) in je na voljo tudi na primerku [prevajalnika](https://tailwindphp.inline0.dev/sl/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']
```

Podajte niz CSS za branje glede na prilagojeno temo:

```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 uporablja eno samo osnovno vrednost `--spacing` namesto lestvice `--spacing-*`, zato `tw::spacing()` vrne samo žetone `--spacing-*` po meri, ki jih določite. Enake metode so na voljo tudi na primerku prevajalnika: `$compiler->colors()`, `$compiler->breakpoints()`, `$compiler->spacing()`. Celotne podpise najdete v [API](https://tailwindphp.inline0.dev/sl/docs/api).

## Naslednji koraki

- [Direktive](https://tailwindphp.inline0.dev/sl/docs/usage/directives) — `@apply`, `@utility`, `@custom-variant`, `@layer`.
- [Uvozi](https://tailwindphp.inline0.dev/sl/docs/usage/imports) — `@import`, navidezni moduli in Prednastavljeni slogi.
- [API](https://tailwindphp.inline0.dev/sl/docs/api) — vsi dostopniki in metode za pregled.