# Tema ir tinkinimas

Tailwind tema yra plokščias CSS kintamųjų rinkinys. Ją išplėsite arba pakeisite įvesties CSS faile esančiu `@theme { … }` bloku, jo reikšmes nurodysite iš CSS naudodami temos funkcijas, o išspręstas reikšmes nuskaitysite iš PHP. Atskiro JavaScript konfigūracijos failo nėra — tema apibrėžiama tik CSS.

## Blokas `@theme`

`@theme` blokas apibrėžia dizaino žetonus kaip CSS pasirinktines ypatybes. Kiekvieno kintamojo vardų srities priešdėlis (`--color-*`, `--font-*`, `--breakpoint-*`, `--spacing-*`, …) nurodo Tailwind, kurias pagalbines klases ir variantus žetonas papildo.

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

Kiekvienas žetonas savo vardų srityje užregistruoja pagalbines klases. Aukščiau pateiktame pavyzdyje sukuriami `bg-brand`, `text-brand`, `border-brand`, šeima `font-heading`, adaptyvusis variantas `xs:` ir tarpai `p-huge`/`m-huge` — jie generuojami tik tada, kai klasė pasirodo turinyje.

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

Žetonas `--breakpoint-xs` tiesiogiai užregistruoja variantą `xs:`:

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

### Įprastos vardų sritys

| Vardų sritis | Papildo |
|-----------|-------|
| `--color-*` | `bg-*`, `text-*`, `border-*`, `fill-*`, `stroke-*`, … |
| `--font-*` | `font-*` šeimos pagalbinės klasės |
| `--text-*` | `text-*` šrifto dydžio pagalbinės klasės |
| `--breakpoint-*` | adaptyvieji variantai (`sm:`, `md:`, pasirinktiniai `xs:`) |
| `--spacing-*` | pavadintos tarpų reikšmės (`p-huge`, `m-huge`) |
| `--radius-*` | `rounded-*` pagalbinės klasės |
| `--shadow-*` | `shadow-*` pagalbinės klasės |

### Vardų srities išvalymas

Nustačius vardų srities pakaitos simbolį į `initial`, pašalinamos numatytosios Tailwind reikšmės toje vardų srityje prieš pridedant jūsų žetonus. Taip galima pradėti nuo tuščios paletės:

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

`--*: initial;` išvalo visą temą. Viena `initial` reikšmė ne pakaitos simbolio rakte (`--color-red-500: initial;`) pašalina tik tą žetoną. Pakaitos simbolio `-*` reikšmė gali būti tik `initial` — bet kuri kita reikšmė yra klaida.

## Temos reikšmių skaitymas CSS

### `theme()`

Senoji funkcija `theme()` nuskaito reikšmę pagal taškų žymėjimą, naudodama v3 stiliaus vardų sritis. Ji kompiliavimo metu grąžina žetono reikšmę, todėl ją galima naudoti visur, kur tikimasi reikšmės, įskaitant pasirinktines taisykles ir kitas deklaracijas.

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

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

Taškų keliai atitinka pagrindinius kintamuosius (`colors.red.500` → `--color-red-500`, `fontFamily.sans` → sans šeima). Galima nurodyti nepermatomumo modifikatorių: `theme(colors.red.500 / 50%)`. Kaip antrą argumentą galima perduoti atsarginę reikšmę: `theme(colors.brand, #000)`. Jei kelio išspręsti nepavyksta ir atsarginė reikšmė nenurodyta, kandidatas, kuriame jis naudojamas, atmetamas.

### `--theme()`

`--theme()` nuskaito temos kintamąjį pagal pasirinktinės ypatybės pavadinimą CSS ir pagal numatytuosius nustatymus grąžina nuorodą `var()`, todėl reikšmę galima keisti vykdymo metu:

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

Pridėkite `inline`, kad vietoj nuorodos `var()` būtų įterpta išspręsta reikšmė: `--theme(--color-brand inline)`. Antrasis argumentas yra atsarginė reikšmė (`--theme(--color-brand, #000)`), o atsarginė `initial` reikšmė apdorojama specialiai — ji įterpiama į įdėtas `var()` nuorodas, kurios pačios išsprendžiamos į `initial`. At-rule viduje (`@media`, `@container`) `--theme()` visada išsprendžiama tiesiogiai, nes `var()` tokiose preambulėse negalioja.

### `--spacing()`

`--spacing(n)` padaugina bazinį temos tarpų vienetą (`--spacing`) iš `n`:

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

Kai daugiklis yra `1`, grąžinamas pats bazinis kintamasis (`--spacing(1)` → `var(--spacing)`, taip pat išveda ir `p-1`), o `0` atveju gaunamas paprastas nulinis ilgis.

Tai tas pats skaičiavimas, kurį naudoja įtaisytosios tarpų pagalbinės klasės, todėl pasirinktinės reikšmės išlieka suderinamos su `p-4`, `m-4` ir panašiomis.

### `--alpha()`

`--alpha(color / opacity)` pritaiko spalvai nepermatomumą naudodama `color-mix()` oklab spalvų erdvėje:

```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()` išlieka keičiama vykdymo metu; prieš ją esanti statinė atsarginė reikšmė, apskaičiuota pagal temos reikšmę, skirta naršyklėms be `color-mix()`. Atsarginę reikšmę išjunkite parinktimi `polyfills`, esančia [`tw::compile()`](https://tailwindphp.inline0.dev/lt/docs/api#twcompile).

### Nepermatomumo ir `color-mix()` → `oklab()` derinimas

Nepermatomumo modifikatoriai sudedami. Pritaikius 50 % reikšmei, kurioje jau yra 50 %, gaunama 25 %; skaičiuojama oklab erdvėje. Kai nepermatomumo modifikatorius taikomas statinei spalvai, TailwindPHP išraišką `color-mix(in oklab, …)` supaprastina iki konkrečios reikšmės `oklab()` — taip pat, kaip lightningcss atlieka šią konversiją pradinėje įrankių grandinėje Tailwind. Dinaminės spalvos (vis dar apgaubtos `var()`) išlaiko formą `color-mix()`, todėl jas galima keisti vykdymo metu.

## Temos reikšmių skaitymas iš PHP

Trys prieigos metodai grąžina išspręstas temos reikšmes kaip PHP masyvus. Kiekvienas priima pasirenkamą įvesties eilutę CSS (numatytoji reikšmė `@import "tailwindcss";`); juos taip pat galima naudoti su [kompiliatoriaus egzemplioriumi](https://tailwindphp.inline0.dev/lt/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']
```

Norėdami nuskaityti tinkintos temos reikšmes, perduokite CSS eilutę:

```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 naudoja vieną bazinę `--spacing` reikšmę, o ne `--spacing-*` skalę, todėl `tw::spacing()` grąžina tik jūsų apibrėžtus tinkintus `--spacing-*` žetonus. Tie patys metodai prieinami ir iš kompiliatoriaus egzemplioriaus: `$compiler->colors()`, `$compiler->breakpoints()`, `$compiler->spacing()`. Visus parašus rasite [API](https://tailwindphp.inline0.dev/lt/docs/api).

## Tolesni veiksmai

- [Direktyvos](https://tailwindphp.inline0.dev/lt/docs/usage/directives) — `@apply`, `@utility`, `@custom-variant`, `@layer`.
- [Importai](https://tailwindphp.inline0.dev/lt/docs/usage/imports) — `@import`, virtualūs moduliai ir Preflight.
- [API](https://tailwindphp.inline0.dev/lt/docs/api) — visi prieigos ir tikrinimo metodai.