# Téma és testreszabás

A Tailwind témája CSS változók lapos készlete. A bemeneti CSS-ban lévő `@theme { … }` blokkal bővítheti vagy lecserélheti, az értékekre a CSS belsejéből hivatkozhat a témához tartozó függvényekkel, a feloldott értékeket pedig a PHP-ból olvashatja ki. Nincs külön JavaScript konfigurációs fájl; a téma teljes egészében a CSS-ban található.

## A `@theme` blokk

A `@theme` blokk tervezési tokeneket deklarál CSS egyéni tulajdonságként. Az egyes változók névtér-előtagja (`--color-*`, `--font-*`, `--breakpoint-*`, `--spacing-*` stb.) jelzi a Tailwind számára, hogy a token mely segédosztályokat és változatokat szolgálja ki.

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

Minden token a saját névtere alatt regisztrál segédosztályokat. A fenti példa elérhetővé teszi a `bg-brand`, a `text-brand` és a `border-brand` osztályt, a `font-heading` családot, egy `xs:` reszponzív változatot, valamint a `p-huge`/`m-huge` térközöket; ezek csak akkor jönnek létre, ha az osztály szerepel a tartalomban.

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

A `--breakpoint-xs` token közvetlenül regisztrálja a `xs:` változatot:

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

### Gyakori névterek

| Névtér | Elérhetővé teszi |
|-----------|-------|
| `--color-*` | `bg-*`, `text-*`, `border-*`, `fill-*`, `stroke-*`, … |
| `--font-*` | `font-*` család segédosztályai |
| `--text-*` | `text-*` betűméret-segédosztályai |
| `--breakpoint-*` | reszponzív változatok (`sm:`, `md:`, egyéni `xs:`) |
| `--spacing-*` | elnevezett térközértékek (`p-huge`, `m-huge`) |
| `--radius-*` | `rounded-*` segédosztályok |
| `--shadow-*` | `shadow-*` segédosztályok |

### Névtér alapértelmezéseinek törlése

Ha egy névtér helyettesítő karakterének értéke `initial`, akkor a rendszer eltávolítja a Tailwind alapértelmezéseit az adott névtérből, mielőtt hozzáadná az Ön tokenjeit. Így tiszta palettáról indulhat:

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

A `--*: initial;` a teljes témát törli. Ha egy nem helyettesítő kulcs (`--color-red-500: initial;`) értéke `initial`, csak az adott token törlődik. A `initial` érték használható egy `-*` helyettesítő kulcs értékeként; minden más érték hibát okoz.

## Témaértékek beolvasása a CSS-ban

### `theme()`

Az örökölt `theme()` függvény pontozott jelöléssel olvas be egy értéket a v3-stílusú névterekből. Fordításkor feloldja a token értékére, ezért bárhol használható, ahol érték várható, így egyéni szabályokban és más deklarációkban is.

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

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

A pontozott útvonalak az alapul szolgáló változókra képeződnek le (`colors.red.500` → `--color-red-500`, `fontFamily.sans` → a sans család). Az átlátszatlanság módosítója is támogatott: `theme(colors.red.500 / 50%)`. Tartalékérték második argumentumként adható meg: `theme(colors.brand, #000)`. Ha egy útvonal nem oldható fel, és nincs megadva tartalékérték, az azt használó jelölt kimarad.

### `--theme()`

A `--theme()` a téma változóját annak CSS egyéni tulajdonságneve alapján olvassa be, és alapértelmezés szerint `var()` hivatkozást ad vissza, így az érték futás közben felülbírálható marad:

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

A feloldott érték behelyettesítéséhez `inline` adható meg `var()` hivatkozás helyett: `--theme(--color-brand inline)`. A második argumentum a tartalékérték (`--theme(--color-brand, #000)`), az `initial` tartalékérték kezelése pedig speciális: a rendszer beilleszti a beágyazott `var()` hivatkozásokba, amelyek maguk is `initial` értékre oldódnak fel. At-szabályon belül (`@media`, `@container`) a `--theme()` mindig közvetlenül oldódik fel, mert az `var()` nem érvényes ezekben az előtagokban.

### `--spacing()`

A `--spacing(n)` megszorozza a téma alap térközegységét (`--spacing`) a következővel: `n`

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

A `1` szorzó az alapváltozóra oldódik fel (`--spacing(1)` → `var(--spacing)`, ezt adja ki a `p-1` is), a `0` pedig egyszerű, nulla hosszúságú értékre.

Ez ugyanaz a számítás, amelyet a beépített térközsegédprogramok használnak, így az egyéni értékek összhangban maradnak a következőkkel: `p-4`, `m-4` és a hasonlókkal.

### `--alpha()`

A `--alpha(color / opacity)` a `color-mix()` használatával alkalmaz átlátszatlanságot egy színre az oklab színtérben:

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

A `color-mix()` alak futás közben felülbírálható marad; az előtte lévő, témaértékből számított statikus tartalékérték olyan böngészőkben is működik, amelyek nem támogatják a `color-mix()` használatát. A tartalékérték kikapcsolásához használd a [`tw::compile()`](https://tailwindphp.inline0.dev/hu/docs/api#twcompile) `polyfills` beállítását.

### Az átlátszatlanság és a `color-mix()` egymásra rétegezése → `oklab()`

Az átlátszatlanság-módosítók összeadódnak. Ha egy már 50%-os értékre újabb 50%-ot alkalmazunk, az eredmény 25%, oklab színtérben számítva. Amikor egy átlátszatlanság-módosító statikus színre oldódik fel, a TailwindPHP a `color-mix(in oklab, …)` kifejezést konkrét `oklab()` értékké alakítja – ugyanazzal a konverzióval, amelyet az upstream Tailwind eszközlánc végez –, míg a dinamikus színek (amelyek továbbra is `var()` formában vannak becsomagolva) megtartják a `color-mix()` alakot, hogy futás közben felülbírálhatók maradjanak.

## Témaértékek beolvasása innen: PHP

Három elérő a feloldott témaértékeket PHP tömbökként adja vissza. Mindegyikhez megadható egy opcionális bemeneti CSS karakterlánc (alapértelmezés: `@import "tailwindcss";`), és mindhárom elérhető egy [fordító példányán is](https://tailwindphp.inline0.dev/hu/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']
```

Egy CSS karakterlánccal egy testreszabott témából olvashatsz be értékeket:

```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']
```

A TailwindCSS 4 egyetlen `--spacing` alapértéket használ a `--spacing-*` skála helyett, ezért a `tw::spacing()` csak az általad meghatározott egyéni `--spacing-*` tokeneket adja vissza. Fordító példányán ugyanezek a metódusok érhetők el: `$compiler->colors()`, `$compiler->breakpoints()`, `$compiler->spacing()`. A teljes szignatúrákért lásd a [API](https://tailwindphp.inline0.dev/hu/docs/api) dokumentációt.

## Következő lépések

- [Direktívák](https://tailwindphp.inline0.dev/hu/docs/usage/directives) – `@apply`, `@utility`, `@custom-variant`, `@layer`.
- [Importok](https://tailwindphp.inline0.dev/hu/docs/usage/imports) – `@import`, virtuális modulok és Preflight.
- [API](https://tailwindphp.inline0.dev/hu/docs/api) – minden elérő és vizsgálati metódus.