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.

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.

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

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

Veelgebruikte namespaces

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:

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

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

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

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

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

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

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

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.

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:

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 voor de volledige handtekeningen.

Volgende stappen

• Richtlijnen — @apply, @utility, @custom-variant, @layer.
• Imports — @import, virtuele modules en Preflight.
• API — alle accessors en inspectiemethoden.