# Tema og tilpasning

Tailwinds tema er et fladt sæt af CSS-variabler. Du udvider eller erstatter det med en `@theme { … }`-blok i dit input-CSS, henviser til værdierne fra CSS via temafunktionerne og læser de løste værdier fra PHP. Der findes ingen JavaScript-konfigurationsfil — temaet ligger udelukkende i CSS.

## Blokken `@theme`

En `@theme`-blok definerer designtokens som CSS-brugerdefinerede egenskaber. Navnerumspræfikset på hver variabel (`--color-*`, `--font-*`, `--breakpoint-*`, `--spacing-*`, …) fortæller Tailwind, hvilke hjælpeklasser og varianter tokenet indgår i.

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

Hvert token registrerer hjælpeklasser under sit navnerum. Eksemplet ovenfor gør `bg-brand`, `text-brand`, `border-brand`, familien `font-heading`, en responsiv variant `xs:` samt afstandene `p-huge`/`m-huge` tilgængelige — de genereres kun, når klassen optræder i dit indhold.

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

Tokenet `--breakpoint-xs` registrerer varianten `xs:` direkte:

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

### Almindelige navnerum

| Navnerum | Leverer |
|-----------|-------|
| `--color-*` | `bg-*`, `text-*`, `border-*`, `fill-*`, `stroke-*`, … |
| `--font-*` | familiehjælpeklasser for `font-*` |
| `--text-*` | skriftstørrelsesklasser for `text-*` |
| `--breakpoint-*` | responsive varianter (`sm:`, `md:`, brugerdefinerede `xs:`) |
| `--spacing-*` | navngivne afstandsværdier (`p-huge`, `m-huge`) |
| `--radius-*` | `rounded-*`-hjælpeklasser |
| `--shadow-*` | `shadow-*`-hjælpeklasser |

### Rydning af et navnerum

Hvis du sætter et navnerums-wildcard til `initial`, fjernes Tailwinds standardværdier for det navnerum, før dine egne tokens tilføjes. Så kan du starte med en tom palet:

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

`--*: initial;` rydder hele temaet. En enkelt værdi på `initial` for en nøgle uden wildcard (`--color-red-500: initial;`) fjerner kun det ene token. Kun `initial` accepteres som værdi for et wildcard for `-*` — alle andre værdier giver en fejl.

## Brug af temaværdier i CSS

### `theme()`

Den ældre funktion `theme()` læser en værdi med punktnotation i navnerum af typen v3. Den løses til tokenets værdi ved kompilering, så den kan bruges overalt, hvor en værdi forventes — også i brugerdefinerede regler og andre deklarationer.

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

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

Stier med punktnotation svarer til de underliggende variabler (`colors.red.500` → `--color-red-500`, `fontFamily.sans` → sans-serif-familien). En opacitetsmodifikator understøttes: `theme(colors.red.500 / 50%)`. En reserveværdi kan angives som andet argument: `theme(colors.brand, #000)`. Hvis en sti ikke kan løses, og der ikke er angivet en reserveværdi, fjernes kandidaten, der bruger den.

### `--theme()`

`--theme()` læser en temavariabel ud fra dens CSS-brugerdefinerede egenskabsnavn og returnerer som standard en `var()`-reference, så værdien stadig kan tilsidesættes under kørsel:

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

Tilføj `inline` for at indsætte den løste værdi i stedet for en `var()`-reference: `--theme(--color-brand inline)`. Andet argument er en reserveværdi (`--theme(--color-brand, #000)`), og en `initial`-reserveværdi håndteres særligt — den indsættes i indlejrede `var()`-referencer, der selv løses til `initial`. Inde i en at-rule (`@media`, `@container`) løses `--theme()` altid direkte, fordi `var()` ikke er gyldig i disse præambler.

### `--spacing()`

`--spacing(n)` ganger temaets grundlæggende afstandsenhed (`--spacing`) med `n`:

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

En multiplikator på `1` giver selve grundvariablen (`--spacing(1)` → `var(--spacing)`, hvilket også er det, `p-1` udsender), mens `0` giver en længde på nul.

Det er den samme beregning, som de indbyggede afstandshjælpeklasser bruger, så brugerdefinerede værdier passer sammen med `p-4`, `m-4` og lignende.

### `--alpha()`

`--alpha(color / opacity)` anvender opacitet på en farve med en `color-mix()` i farverummet 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);
  }
}
```

Formen `color-mix()` kan stadig tilsidesættes under kørsel; den statiske reserveværdi før den, beregnet ud fra temaværdien, dækker browsere uden `color-mix()`. Slå reserveværdien fra med indstillingen `polyfills` i [`tw::compile()`](https://tailwindphp.inline0.dev/da/docs/api#twcompile).

### Kombination af opacitet og `color-mix()` → `oklab()`

Opacitetsmodifikatorer kombineres. Anvendes 50 % på en værdi, der allerede har 50 %, bliver resultatet 25 %, beregnet i oklab. Når en opacitetsmodifikator løses mod en statisk farve, reducerer TailwindPHP udtrykket `color-mix(in oklab, …)` til en konkret `oklab()`-værdi — den samme konvertering, som lightningcss udfører i den oprindelige værktøjskæde Tailwind — mens dynamiske farver (dem, der stadig er omsluttet af `var()`) beholder formen `color-mix()`, så de fortsat kan tilsidesættes under kørsel.

## Brug af temaværdier fra PHP

Tre metoder returnerer løste temaværdier som PHP-arrayer. Hver tager en valgfri input-CSS-streng (standard `@import "tailwindcss";`) og findes også på en [compilerinstans](https://tailwindphp.inline0.dev/da/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']
```

Angiv en CSS-streng for at læse fra et tilpasset tema:

```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 bruger én enkelt grundværdi af typen `--spacing` i stedet for en `--spacing-*`-skala, så `tw::spacing()` returnerer kun de brugerdefinerede `--spacing-*`-tokens, du definerer. De samme metoder findes på en compilerinstans: `$compiler->colors()`, `$compiler->breakpoints()`, `$compiler->spacing()`. Se [API](https://tailwindphp.inline0.dev/da/docs/api) for de fulde signaturer.

## Næste trin

- [Directives](https://tailwindphp.inline0.dev/da/docs/usage/directives) — `@apply`, `@utility`, `@custom-variant`, `@layer`.
- [Imports](https://tailwindphp.inline0.dev/da/docs/usage/imports) — `@import`, virtuelle moduler og Preflight.
- [API](https://tailwindphp.inline0.dev/da/docs/api) — alle metoder til opslag og inspektion.