# Motīvs un pielāgošana

Tailwind motīvs ir plakans CSS mainīgo kopums. Paplašiniet vai aizstājiet to ar `@theme { … }` bloku ievades CSS, atsaucieties uz šīm vērtībām no CSS, izmantojot motīva funkcijas, un nolasiet atrisinātās vērtības no PHP. JavaScript konfigurācijas faila nav — motīvs pilnībā atrodas CSS.

## Bloks `@theme`

Bloks `@theme` definē dizaina marķierus kā CSS pielāgotus rekvizītus. Katram mainīgajam pievienotais nosaukumvietas prefikss (`--color-*`, `--font-*`, `--breakpoint-*`, `--spacing-*`, …) norāda Tailwind, kuras utilītprogrammas un variantus šis marķieris nodrošina.

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

Katrs marķieris reģistrē utilītprogrammas attiecīgajā nosaukumvietā. Iepriekšējais piemērs padara pieejamus `bg-brand`, `text-brand`, `border-brand`, saimi `font-heading`, adaptīvo variantu `xs:` un atstarpes `p-huge`/`m-huge` — tos ģenerē tikai tad, ja klase ir norādīta jūsu saturā.

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

Marķieris `--breakpoint-xs` tieši reģistrē variantu `xs:`:

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

### Biežākās nosaukumvietas

| Nosaukumvieta | Nodrošina |
|-----------|-------|
| `--color-*` | `bg-*`, `text-*`, `border-*`, `fill-*`, `stroke-*`, … |
| `--font-*` | utilītprogrammas saimei `font-*` |
| `--text-*` | fonta izmēra utilītprogrammas `text-*` |
| `--breakpoint-*` | adaptīvie varianti (`sm:`, `md:`, pielāgoti `xs:`) |
| `--spacing-*` | nosauktas atstarpju vērtības (`p-huge`, `m-huge`) |
| `--radius-*` | utilītprogrammas `rounded-*` |
| `--shadow-*` | utilītprogrammas `shadow-*` |

### Nosaukumvietas notīrīšana

Iestatot nosaukumvietas aizstājējzīmi uz `initial`, tiek noņemti Tailwind noklusējumi šai nosaukumvietai, pirms pievienoti jūsu marķieri. Tādējādi varat sākt ar tukšu krāsu paleti:

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

`--*: initial;` notīra visu tēmu. Viena `initial` vērtība atslēgai bez aizstājējzīmes (`--color-red-500: initial;`) noņem tikai šo vienu tokenu. `initial` ir vienīgā pieņemtā vērtība `-*` aizstājējzīmei — jebkura cita vērtība izraisa kļūdu.

## Motīva vērtību nolasīšana no CSS

### `theme()`

Mantotā funkcija `theme()` nolasa vērtību ar punktu pierakstu, izmantojot v3 stila nosaukumvietas. Vērtība tiek atrisināta kompilēšanas laikā, tāpēc funkciju var izmantot jebkur, kur vajadzīga vērtība, tostarp pielāgotos noteikumos un citās deklarācijās.

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

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

Punktu ceļi atbilst pamatā esošajiem mainīgajiem (`colors.red.500` → `--color-red-500`, `fontFamily.sans` → sans saime). Tiek atbalstīts necaurredzamības modifikators: `theme(colors.red.500 / 50%)`. Rezerves vērtību var norādīt kā otro argumentu: `theme(colors.brand, #000)`. Ja ceļu nevar atrisināt un rezerves vērtība nav norādīta, kandidāts, kurā tas izmantots, tiek atmests.

### `--theme()`

`--theme()` nolasa motīva mainīgo pēc tā CSS pielāgotā rekvizīta nosaukuma un pēc noklusējuma atgriež `var()` atsauci, lai vērtību varētu pārrakstīt izpildlaikā:

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

Pievienojiet `inline`, lai `var()` atsauces vietā ievietotu atrisināto vērtību: `--theme(--color-brand inline)`. Otrais arguments ir rezerves vērtība (`--theme(--color-brand, #000)`), bet `initial` rezerves vērtība tiek apstrādāta īpaši — tā tiek ievietota ligzdotās `var()` atsaucēs, kuras pašas atrisinās kā `initial`. At-rule iekšienē (`@media`, `@container`) `--theme()` vienmēr tiek atrisināts uzreiz, jo šajās priekšdaļās nav derīgs `var()`.

### `--spacing()`

`--spacing(n)` reizina motīva pamata atstarpes vienību (`--spacing`) ar `n`:

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

Reizinātājs `1` tiek atrisināts kā pats bāzes mainīgais (`--spacing(1)` → `var(--spacing)`, ko izvada arī `p-1`), savukārt `0` — kā vienkāršs nulles garums.

Šis ir tas pats aprēķins, ko izmanto iebūvētās atstarpju utilītprogrammas, tāpēc pielāgotās vērtības saskan ar `p-4`, `m-4` un pārējām.

### `--alpha()`

`--alpha(color / opacity)` piešķir krāsai necaurredzamību, izmantojot `color-mix()` oklab krāstelpā:

```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()` paliek pārrakstāma izpildlaikā; pirms tās norādītā statiskā rezerves vērtība, kas aprēķināta no motīva vērtības, paredzēta pārlūkprogrammām bez `color-mix()`. Izslēdziet rezerves vērtību ar opciju `polyfills`, kas pieejama [`tw::compile()`](https://tailwindphp.inline0.dev/lv/docs/api#twcompile).

### Necaurredzamības un `color-mix()` → `oklab()` apvienošana

Necaurredzamības modifikatori kombinējas. Piemērojot 50% vērtībai, kurai jau ir 50%, rezultāts ir 25%, kas aprēķināts oklab krāstelpā. Kad necaurredzamības modifikators tiek piemērots statiskai krāsai, TailwindPHP pārveido izteiksmi `color-mix(in oklab, …)` konkrētā `oklab()` vērtībā — tāpat kā lightningcss to dara augšupējā Tailwind rīku ķēdē — savukārt dinamiskās krāsas (tās, kas joprojām ietvertas `var()`) saglabā `color-mix()` formu, lai tās varētu mainīt izpildlaikā.

## Motīva vērtību nolasīšana no PHP

Trīs piekļuves funkcijas atgriež atrisinātās motīva vērtības kā PHP masīvus. Katrai var norādīt ievades CSS virkni (noklusējums `@import "tailwindcss";`), un tās pieejamas arī [kompilatora instancē](https://tailwindphp.inline0.dev/lv/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']
```

Lai nolasītu pielāgota motīva vērtības, nododiet virkni 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 izmanto vienu bāzes vērtību `--spacing`, nevis `--spacing-*` skalu, tāpēc `tw::spacing()` atgriež tikai jūsu definētos pielāgotos marķierus `--spacing-*`. Kompilatora instancē ir pieejamas tās pašas metodes: `$compiler->colors()`, `$compiler->breakpoints()`, `$compiler->spacing()`. Pilnus parakstus skatiet [API](https://tailwindphp.inline0.dev/lv/docs/api).

## Nākamās darbības

- [Direktīvas](https://tailwindphp.inline0.dev/lv/docs/usage/directives) — `@apply`, `@utility`, `@custom-variant`, `@layer`.
- [Importi](https://tailwindphp.inline0.dev/lv/docs/usage/imports) — `@import`, virtuālie moduļi un Preflight.
- [API](https://tailwindphp.inline0.dev/lv/docs/api) — visas piekļuves un pārbaudes metodes.