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.

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.

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

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

Vanliga namnområden

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:

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

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

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

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

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

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

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

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.

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:

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 för fullständiga signaturer.

Nästa steg

• Direktiv — @apply, @utility, @custom-variant, @layer.
• Importer — @import, virtuella moduler och Preflight.
• API — alla åtkomst- och inspektionsmetoder.