# Thema en aanpassingen

Het thema van Tailwind bestaat uit een platte verzameling CSS-variabelen. Je breidt het uit of vervangt het met een blok `@theme { … }` in je invoer-CSS, verwijst vanuit CSS naar die waarden via de themafuncties en leest de opgeloste waarden uit PHP. Er is geen configuratiebestand JavaScript — het thema staat volledig in CSS.

## Het blok `@theme`

Een blok `@theme` definieert ontwerptokens als aangepaste CSS-eigenschappen. Het voorvoegsel van de namespace van elke variabele (`--color-*`, `--font-*`, `--breakpoint-*`, `--spacing-*`, …) geeft Tailwind aan welke hulpprogramma's en varianten het token gebruikt.

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

Elk token registreert hulpprogramma's binnen zijn namespace. Het bovenstaande voorbeeld maakt `bg-brand`, `text-brand`, `border-brand`, de `font-heading`-familie, een responsieve variant `xs:` en `p-huge`/`m-huge` voor afstand beschikbaar — deze worden alleen gegenereerd als de klasse in je content voorkomt.

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

Het token `--breakpoint-xs` registreert de variant `xs:` rechtstreeks:

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

### Veelgebruikte namespaces

| Namespace | Levert |
|-----------|-------|
| `--color-*` | `bg-*`, `text-*`, `border-*`, `fill-*`, `stroke-*`, … |
| `--font-*` | `font-*`-familie van hulpprogramma's |
| `--text-*` | `text-*`-hulpprogramma's voor lettergrootte |
| `--breakpoint-*` | responsieve varianten (`sm:`, `md:`, aangepaste `xs:`) |
| `--spacing-*` | benoemde afstandswaarden (`p-huge`, `m-huge`) |
| `--radius-*` | `rounded-*`-hulpprogramma's |
| `--shadow-*` | `shadow-*`-hulpprogramma's |

### Een namespace leegmaken

Als je een wildcard voor een namespace instelt op `initial`, worden de standaardwaarden van Tailwind voor die namespace verwijderd voordat je eigen tokens worden toegevoegd. Zo kun je met een leeg palet beginnen:

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

`--*: initial;` leegt het volledige thema. Een enkele waarde van `initial` op een sleutel zonder wildcard (`--color-red-500: initial;`) verwijdert alleen dat token. Voor een `-*`-wildcard is alleen `initial` als waarde toegestaan; elke andere waarde veroorzaakt een fout.

## Themavalues lezen in CSS

### `theme()`

De verouderde functie `theme()` leest een waarde met puntnotatie binnen namespaces in de stijl van v3. De functie wordt tijdens het compileren omgezet naar de tokenwaarde en kan dus overal worden gebruikt waar een waarde wordt verwacht, ook in aangepaste regels en andere declaraties.

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

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

Dot-paden verwijzen naar de onderliggende variabelen (`colors.red.500` → `--color-red-500`, `fontFamily.sans` → de sans-familie). Een dekkingsmodifier wordt ondersteund: `theme(colors.red.500 / 50%)`. Een fallback kan als tweede argument worden meegegeven: `theme(colors.brand, #000)`. Als een pad niet kan worden opgelost en er geen fallback is opgegeven, wordt de kandidaat die het gebruikt verwijderd.

### `--theme()`

`--theme()` leest een themavariabele op basis van de naam van de aangepaste eigenschap CSS en retourneert standaard een verwijzing naar `var()`, zodat de waarde tijdens runtime overschrijfbaar blijft:

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

Voeg `inline` toe om de opgeloste waarde in te vullen in plaats van een verwijzing naar `var()`: `--theme(--color-brand inline)`. Een tweede argument is een fallback (`--theme(--color-brand, #000)`), en een fallback `initial` wordt speciaal afgehandeld: deze wordt ingevoegd in geneste verwijzingen naar `var()` die zelf naar `initial` worden opgelost. Binnen een at-regel (`@media`, `@container`) wordt `--theme()` altijd inline opgelost, omdat `var()` in die preludes niet geldig is.

### `--spacing()`

`--spacing(n)` vermenigvuldigt de basiseenheid voor afstand van het thema (`--spacing`) met `n`:

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

Een vermenigvuldigingsfactor van `1` wordt opgelost naar de basisvariabele zelf (`--spacing(1)` → `var(--spacing)`, wat ook door `p-1` wordt gegenereerd), en `0` naar een gewone lengte van nul.

Dit is dezelfde berekening als bij de ingebouwde afstandshulpmiddelen, zodat aangepaste waarden consistent blijven met `p-4`, `m-4` en dergelijke.

### `--alpha()`

`--alpha(color / opacity)` past een dekkingswaarde toe op een kleur met een `color-mix()` in de oklab-kleurruimte:

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

De `color-mix()`-vorm blijft tijdens runtime overschrijfbaar; de statische terugvalwaarde ervoor, berekend op basis van de them waarde, werkt in browsers zonder `color-mix()`. Schakel de terugvalwaarde uit met de optie `polyfills` van [`tw::compile()`](https://tailwindphp.inline0.dev/nl/docs/api#twcompile).

### Dekking stapelen en `color-mix()` → `oklab()`

Dekkingsmodifiers worden gecombineerd. Als je 50% toepast op een waarde die al 50% heeft, krijg je 25%, berekend in oklab. Wanneer een dekkingsmodifier wordt toegepast op een statische kleur, vouwt TailwindPHP de expressie `color-mix(in oklab, …)` samen tot een concrete waarde van `oklab()` — dezelfde omzetting die lightningcss uitvoert in de upstream-toolchain Tailwind — terwijl dynamische kleuren (die nog in `var()` zijn verpakt) de vorm `color-mix()` behouden, zodat ze tijdens runtime overschrijfbaar blijven.

## Themawaarden uitlezen vanuit PHP

Drie accessors retourneren opgeloste themawaarden als arrays van PHP. Elk accepteert een optionele invoerstring CSS (standaard `@import "tailwindcss";`) en is ook beschikbaar op een [compilerinstantie](https://tailwindphp.inline0.dev/nl/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']
```

Geef een string van CSS door om waarden uit een aangepast thema uit te lezen:

```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 gebruikt één basiswaarde voor `--spacing` in plaats van een schaal voor `--spacing-*`, dus `tw::spacing()` retourneert alleen de aangepaste `--spacing-*`-tokens die u definieert. Vanuit een compilerinstantie bestaan dezelfde methoden: `$compiler->colors()`, `$compiler->breakpoints()`, `$compiler->spacing()`. Bekijk de [API](https://tailwindphp.inline0.dev/nl/docs/api) voor de volledige handtekeningen.

## Volgende stappen

- [Richtlijnen](https://tailwindphp.inline0.dev/nl/docs/usage/directives) — `@apply`, `@utility`, `@custom-variant`, `@layer`.
- [Imports](https://tailwindphp.inline0.dev/nl/docs/usage/imports) — `@import`, virtuele modules en Preflight.
- [API](https://tailwindphp.inline0.dev/nl/docs/api) — alle accessors en inspectiemethoden.