Tema in prilagajanje

Tema za Tailwind je raven nabor spremenljivk CSS. Razširite ali zamenjate jo z blokom @theme { … } v vhodnem CSS, na te vrednosti se sklicujete znotraj CSS prek tematskih funkcij, razrešene vrednosti pa preberete iz PHP. Konfiguracijske datoteke JavaScript ni — tema je v celoti določena v CSS.

Blok @theme

Blok @theme določa oblikovalske žetone kot lastnosti po meri CSS. Predpona imenskega prostora vsake spremenljivke (--color-*, --font-*, --breakpoint-*, --spacing-*, …) pove sistemu Tailwind, katere pripomočke in različice žeton napaja.

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

Vsak žeton registrira pripomočke v svojem imenskem prostoru. Zgornji primer omogoči bg-brand, text-brand, border-brand, družino font-heading, odzivno različico xs: ter razmike p-huge/m-huge — ustvarijo se samo, če se razred pojavi v vaši vsebini.

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

Žeton --breakpoint-xs neposredno registrira različico xs::

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

Pogosti imenski prostori

Počiščenje imenskega prostora

Če nadomestni znak imenskega prostora nastavite na initial, se pred dodajanjem vaših žetonov odstranijo privzete vrednosti sistema Tailwind za ta imenski prostor. Tako lahko začnete s prazno paleto:

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

--*: initial; počisti celotno temo. Posamezna vrednost initial za ključ brez nadomestnega znaka (--color-red-500: initial;) odstrani samo ta žeton. Kot vrednost za nadomestni znak -* je sprejet samo initial; vsaka druga vrednost povzroči napako.

Branje vrednosti teme v CSS

theme()

Podedovana funkcija theme() bere vrednost z zapisom s pikami glede na imenske prostore sloga v3. Med prevajanjem se razreši v vrednost žetona, zato jo lahko uporabite povsod, kjer se pričakuje vrednost — tudi v pravilih po meri in drugih deklaracijah.

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

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

Poti s pikami se preslikajo v osnovne spremenljivke (colors.red.500 → --color-red-500, fontFamily.sans → družina sans). Podprt je modifikator neprosojnosti: theme(colors.red.500 / 50%). Nadomestno vrednost lahko podate kot drugi argument: theme(colors.brand, #000). Če poti ni mogoče razrešiti in nadomestna vrednost ni podana, se kandidat, ki jo uporablja, izpusti.

--theme()

--theme() prebere spremenljivko teme po imenu njene lastnosti po meri CSS in privzeto vrne referenco var(), zato lahko vrednost preglasite med izvajanjem:

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

Dodajte inline, da se uporabi razrešena vrednost namesto reference var(): --theme(--color-brand inline). Drugi argument je nadomestna vrednost (--theme(--color-brand, #000)), nadomestna vrednost initial pa je obravnavana posebej — vstavi se v ugnezdene reference var(), ki se same razrešijo v initial. Znotraj pravila at (@media, @container) se --theme() vedno razreši neposredno, ker var() v teh uvodih ni veljaven.

--spacing()

--spacing(n) pomnoži osnovno enoto razmika teme (--spacing) z n:

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

Množitelj 1 se razreši v samo osnovno spremenljivko (--spacing(1) → var(--spacing), kar izpiše tudi p-1), 0 pa v navadno dolžino nič.

Gre za enak izračun kot pri vgrajenih pripomočkih za razmik, zato so vrednosti po meri skladne s p-4, m-4 in podobnimi.

--alpha()

--alpha(color / opacity) uporabi barvno neprosojnost z color-mix() v barvnem 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);
  }
}

Oblika color-mix() omogoča preglasitev med izvajanjem; statična nadomestna vrednost pred njo, izračunana iz vrednosti teme, pokriva brskalnike brez color-mix(). Nadomestno vrednost izklopite z možnostjo polyfills za tw::compile().

Združevanje neprosojnosti in color-mix() → oklab()

Modifikatorji neprosojnosti se seštevajo. Če na vrednost, ki že vsebuje 50 %, uporabite 50 %, dobite 25 %, izračunano v oklab. Ko se modifikator neprosojnosti razreši glede na statično barvo, TailwindPHP skrči izraz color-mix(in oklab, …) v konkretno vrednost oklab() — enako pretvorbo izvaja lightningcss v verigi orodij Tailwind — dinamične barve (ki so še vedno ovite v var()) pa ohranijo obliko color-mix() in tako ostanejo preglasljive med izvajanjem.

Branje vrednosti teme iz PHP

Trije dostopniki vrnejo razrešene vrednosti teme kot polja PHP. Vsak sprejme izbirni vhodni niz CSS (privzeto @import "tailwindcss";) in je na voljo tudi na primerku prevajalnika.

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

Podajte niz CSS za branje glede na prilagojeno temo:

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 uporablja eno samo osnovno vrednost --spacing namesto lestvice --spacing-*, zato tw::spacing() vrne samo žetone --spacing-* po meri, ki jih določite. Enake metode so na voljo tudi na primerku prevajalnika: $compiler->colors(), $compiler->breakpoints(), $compiler->spacing(). Celotne podpise najdete v API.

Naslednji koraki

• Direktive — @apply, @utility, @custom-variant, @layer.
• Uvozi — @import, navidezni moduli in Prednastavljeni slogi.
• API — vsi dostopniki in metode za pregled.