# Tema & anpassning

Tailwinds tema är en platt uppsättning CSS-variabler. Du utökar eller ersätter det med ett `@theme { … }`-block i din indatasträng CSS, refererar till värdena inifrån CSS via temafunktionerna och läser de lösta värdena från PHP. Det finns ingen konfigurationsfil för JavaScript – temat finns helt och hållet i CSS.

## Blocket `@theme`

Ett `@theme`-block deklarerar designtoken som anpassade egenskaper i CSS. Prefixet i varje variabels namnområde (`--color-*`, `--font-*`, `--breakpoint-*`, `--spacing-*`, …) anger Tailwind vilka verktygsklasser och varianter tokenen används för.

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

Varje token registrerar verktygsklasser under sitt namnområde. Exemplet ovan gör `bg-brand`, `text-brand`, `border-brand`, `font-heading`-familjen, en responsiv variant av typen `xs:` och avståndsvärdena `p-huge`/`m-huge` tillgängliga – de genereras bara när klassen förekommer i ditt innehåll.

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

Tokenen `--breakpoint-xs` registrerar varianten `xs:` direkt:

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

### Vanliga namnområden

| Namnrymd | Hämtar in |
|-----------|-------|
| `--color-*` | `bg-*`, `text-*`, `border-*`, `fill-*`, `stroke-*`, … |
| `--font-*` | `font-*`-familjens verktyg |
| `--text-*` | `text-*`-verktyg |
| `--breakpoint-*` | responsiva varianter (`sm:`, `md:`, anpassad `xs:`) |
| `--spacing-*` | namngivna avståndsvärden (`p-huge`, `m-huge`) |
| `--radius-*` | `rounded-*`-verktyg |
| `--shadow-*` | `shadow-*`-verktyg |

### Rensa ett namnområde

Om du anger `initial` som jokertecken tas Tailwinds standardvärden för namnområdet bort innan dina egna token läggs till. Då kan du börja med en tom palett:

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

`--*: initial;` rensar hela temat. Ett enstaka värde på `initial` för en nyckel utan jokertecken (`--color-red-500: initial;`) tar bara bort den tokenen. För jokertecknet `-*` godtas endast `initial` som värde – alla andra värden ger ett fel.

## Läsa temavärden i CSS

### `theme()`

Den äldre funktionen `theme()` läser ett värde med punktnotation mot namnområden av typen v3. Den löser värdet till tokenens värde vid kompilering, så den kan användas överallt där ett värde förväntas – även i anpassade regler och andra 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);
}
```

Punktsökvägar motsvarar de underliggande variablerna (`colors.red.500` → `--color-red-500`, `fontFamily.sans` → sansfamiljen). En opacitetsmodifierare stöds: `theme(colors.red.500 / 50%)`. Ett reservvärde kan anges som andra argument: `theme(colors.brand, #000)`. Om en sökväg inte kan lösas och inget reservvärde anges tas kandidaten som använder den bort.

### `--theme()`

`--theme()` läser en temavariabel med dess namn på anpassad egenskap i CSS och returnerar som standard en `var()`-referens, så att värdet kan åsidosättas vid körning:

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

Lägg till `inline` för att använda det lösta värdet i stället för en `var()`-referens: `--theme(--color-brand inline)`. Ett andra argument anger ett reservvärde (`--theme(--color-brand, #000)`), och ett reservvärde för `initial` hanteras särskilt – det infogas i nästlade `var()`-referenser som själva löses till `initial`. Inuti en at-regel (`@media`, `@container`) löses `--theme()` alltid direkt i raden, eftersom `var()` inte är giltigt i dessa försatser.

### `--spacing()`

`--spacing(n)` multiplicerar temats grundläggande avståndsenhet (`--spacing`) med `n`:

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

En multiplikator på `1` ger själva basvariabeln (`--spacing(1)` → `var(--spacing)`, vilket också är vad `p-1` genererar), medan `0` ger en vanlig längd på noll.

Det här är samma beräkning som de inbyggda avståndsverktygsklasserna använder, så anpassade värden förblir konsekventa med `p-4`, `m-4` och liknande.

### `--alpha()`

`--alpha(color / opacity)` tillämpar opacitet på en färg med ett `color-mix()` i färgrymden 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);
  }
}
```

`color-mix()`-formen kan fortfarande åsidosättas vid körning. Det statiska reservvärdet före den, beräknat från temavärdet, fungerar i webbläsare utan `color-mix()`. Stäng av reservvärdet med alternativet `polyfills` för [`tw::compile()`](https://tailwindphp.inline0.dev/sv/docs/api#twcompile).

### Kombinera opacitet och `color-mix()` → `oklab()`

Opacitetsmodifierare kombineras. Om 50 % tillämpas på ett värde som redan har 50 % opacitet blir resultatet 25 %, beräknat i oklab. När en opacitetsmodifierare löses mot en statisk färg förenklar TailwindPHP uttrycket `color-mix(in oklab, …)` till ett konkret värde i `oklab()` – samma konvertering som lightningcss utför i den överordnade verktygskedjan Tailwind. Dynamiska färger, som fortfarande är omslutna av `var()`, behåller formen `color-mix()` så att de även fortsättningsvis kan åsidosättas vid körning.

## Läsa temavärden från PHP

Tre åtkomstmetoder returnerar lösta temavärden som arrayer av typen PHP. Varje metod tar en valfri indatasträng CSS (standardvärdet är `@import "tailwindcss";`) och finns även på en [kompilatorinstans](https://tailwindphp.inline0.dev/sv/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']
```

Skicka med en CSS-sträng för att läsa från ett anpassat 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 använder ett enda grundvärde av typen `--spacing` i stället för en `--spacing-*`-skala, så `tw::spacing()` returnerar bara de anpassade token av typen `--spacing-*` som du definierar. Samma metoder finns på en kompilatorinstans: `$compiler->colors()`, `$compiler->breakpoints()`, `$compiler->spacing()`. Se [API](https://tailwindphp.inline0.dev/sv/docs/api) för fullständiga signaturer.

## Nästa steg

- [Direktiv](https://tailwindphp.inline0.dev/sv/docs/usage/directives) — `@apply`, `@utility`, `@custom-variant`, `@layer`.
- [Importer](https://tailwindphp.inline0.dev/sv/docs/usage/imports) — `@import`, virtuella moduler och Preflight.
- [API](https://tailwindphp.inline0.dev/sv/docs/api) — alla åtkomst- och inspektionsmetoder.