Téma a úpravy

Téma Tailwind tvoří plochá sada proměnných CSS. Rozšiřte ji nebo nahraďte blokem @theme { … } ve vstupním CSS, na tyto hodnoty odkazujte uvnitř CSS pomocí funkcí tématu a vyřešené hodnoty načtěte zpět z PHP. Neexistuje žádný konfigurační soubor JavaScript — celé téma je uloženo v CSS.

Blok @theme

Blok @theme deklaruje návrhové tokeny jako vlastní vlastnosti CSS. Prefix jmenného prostoru každé proměnné (--color-*, --font-*, --breakpoint-*, --spacing-*, …) určuje, které utility a varianty token ovlivní v Tailwind.

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

Každý token registruje utility pod svým jmenným prostorem. Příklad výše zpřístupní bg-brand, text-brand, border-brand, skupinu font-heading, responzivní variantu xs: a rozestupy p-huge/m-huge — vygenerují se pouze tehdy, když se třída objeví v obsahu.

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

Token --breakpoint-xs registruje variantu xs: přímo:

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

Běžné jmenné prostory

Vymazání jmenného prostoru

Nastavením zástupného znaku jmenného prostoru na initial se před přidáním vlastních tokenů odstraní výchozí hodnoty Tailwind pro daný prostor. Můžete tak začít s čistou paletou:

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

--*: initial; vymaže celé téma. Jedna hodnota initial u klíče bez zástupného znaku (--color-red-500: initial;) odstraní pouze daný token. Jako hodnota zástupného znaku -* je povoleno pouze initial — jakákoli jiná hodnota způsobí chybu.

Čtení hodnot tématu v CSS

theme()

Zastaralá funkce theme() načítá hodnotu pomocí tečkové notace v jmenných prostorech ve stylu v3. Hodnotu tokenu vyhodnotí při kompilaci, takže ji lze použít všude, kde se očekává hodnota — včetně vlastních pravidel a dalších deklarací.

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

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

Cesty s tečkami odpovídají podkladovým proměnným (colors.red.500 → --color-red-500, fontFamily.sans → rodina bezpatkových písem). Podporován je modifikátor opacity: theme(colors.red.500 / 50%). Náhradní hodnotu lze předat jako druhý argument: theme(colors.brand, #000). Pokud cestu nelze vyřešit a není zadána náhradní hodnota, kandidát, který ji používá, se vyřadí.

--theme()

--theme() načítá proměnnou tématu podle názvu její vlastní vlastnosti CSS a ve výchozím nastavení vrací odkaz var(), takže lze hodnotu za běhu přepsat:

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

Přidejte inline, chcete-li místo odkazu var() dosadit vyřešenou hodnotu: --theme(--color-brand inline). Druhý argument představuje náhradní hodnotu (--theme(--color-brand, #000)); náhradní hodnota initial se zpracovává zvláštním způsobem — vloží se do vnořených odkazů var(), které samy odkazují na initial. Uvnitř pravidla at (@media, @container) se --theme() vždy vyhodnotí přímo, protože var() není v těchto uvozujících částech platné.

--spacing()

--spacing(n) násobí základní jednotku rozestupů tématu (--spacing) číslem n:

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

Násobitel 1 odpovídá samotné základní proměnné (--spacing(1) → var(--spacing), což také generuje p-1); 0 pak odpovídá nulové délce.

Jde o stejný výpočet, který používají vestavěné utility rozestupů, takže vlastní hodnoty zůstávají v souladu s p-4, m-4 a dalšími.

--alpha()

--alpha(color / opacity) nastaví krytí barvy pomocí color-mix() v barevném prostoru 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);
  }
}

Tvar color-mix() lze za běhu přepsat; statická náhradní hodnota před ním, vypočtená z hodnoty tématu, zajišťuje podporu prohlížečů bez color-mix(). Náhradní hodnotu vypnete volbou polyfills v tw::compile().

Kombinování opacity a color-mix() → oklab()

Modifikátory opacity se skládají. Přidání 50 % k hodnotě, která už má 50 %, dá 25 %; výpočet probíhá v oklab. Když se modifikátor opacity použije na statickou barvu, TailwindPHP zjednoduší výraz color-mix(in oklab, …) na konkrétní hodnotu oklab() — stejný převod provádí lightningcss v upstream nástrojovém řetězci Tailwind. Dynamické barvy (stále zabalené v var()) si ponechají tvar color-mix(), aby je bylo možné přepisovat za běhu.

Čtení hodnot tématu z PHP

Tři přístupové metody vracejí vyřešené hodnoty tématu jako pole PHP. Každá přijímá volitelný vstupní řetězec CSS (výchozí hodnota @import "tailwindcss";) a je dostupná také na instanci kompilátoru.

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']

Pro načtení hodnot z upraveného tématu předejte řetězec CSS:

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 používá jedinou základní hodnotu --spacing místo škály --spacing-*, takže tw::spacing() vrací pouze vlastní tokeny --spacing-*, které definujete. Stejné metody jsou dostupné i na instanci kompilátoru: $compiler->colors(), $compiler->breakpoints(), $compiler->spacing(). Úplné signatury najdete v API.

Další kroky

• Directives — @apply, @utility, @custom-variant, @layer.
• Imports — @import, virtuální moduly a Preflight.
• API — všechny přístupové metody a metody kontroly.