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.

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.

/* 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:

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

Almindelige navnerum

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:

@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.

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

.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:

.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:

@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:

@utility tint { color: --alpha(var(--color-red-500) / 50%); }

.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().

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.

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:

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 for de fulde signaturer.

Næste trin

• Directives — @apply, @utility, @custom-variant, @layer.
• Imports — @import, virtuelle moduler og Preflight.
• API — alle metoder til opslag og inspektion.