Motīvs un pielāgošana

Tailwind motīvs ir plakans CSS mainīgo kopums. Paplašiniet vai aizstājiet to ar @theme { … } bloku ievades CSS, atsaucieties uz šīm vērtībām no CSS, izmantojot motīva funkcijas, un nolasiet atrisinātās vērtības no PHP. JavaScript konfigurācijas faila nav — motīvs pilnībā atrodas CSS.

Bloks @theme

Bloks @theme definē dizaina marķierus kā CSS pielāgotus rekvizītus. Katram mainīgajam pievienotais nosaukumvietas prefikss (--color-*, --font-*, --breakpoint-*, --spacing-*, …) norāda Tailwind, kuras utilītprogrammas un variantus šis marķieris nodrošina.

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

Katrs marķieris reģistrē utilītprogrammas attiecīgajā nosaukumvietā. Iepriekšējais piemērs padara pieejamus bg-brand, text-brand, border-brand, saimi font-heading, adaptīvo variantu xs: un atstarpes p-huge/m-huge — tos ģenerē tikai tad, ja klase ir norādīta jūsu saturā.

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

Marķieris --breakpoint-xs tieši reģistrē variantu xs::

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

Biežākās nosaukumvietas

Nosaukumvietas notīrīšana

Iestatot nosaukumvietas aizstājējzīmi uz initial, tiek noņemti Tailwind noklusējumi šai nosaukumvietai, pirms pievienoti jūsu marķieri. Tādējādi varat sākt ar tukšu krāsu paleti:

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

--*: initial; notīra visu tēmu. Viena initial vērtība atslēgai bez aizstājējzīmes (--color-red-500: initial;) noņem tikai šo vienu tokenu. initial ir vienīgā pieņemtā vērtība -* aizstājējzīmei — jebkura cita vērtība izraisa kļūdu.

Motīva vērtību nolasīšana no CSS

theme()

Mantotā funkcija theme() nolasa vērtību ar punktu pierakstu, izmantojot v3 stila nosaukumvietas. Vērtība tiek atrisināta kompilēšanas laikā, tāpēc funkciju var izmantot jebkur, kur vajadzīga vērtība, tostarp pielāgotos noteikumos un citās deklarācijās.

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

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

Punktu ceļi atbilst pamatā esošajiem mainīgajiem (colors.red.500 → --color-red-500, fontFamily.sans → sans saime). Tiek atbalstīts necaurredzamības modifikators: theme(colors.red.500 / 50%). Rezerves vērtību var norādīt kā otro argumentu: theme(colors.brand, #000). Ja ceļu nevar atrisināt un rezerves vērtība nav norādīta, kandidāts, kurā tas izmantots, tiek atmests.

--theme()

--theme() nolasa motīva mainīgo pēc tā CSS pielāgotā rekvizīta nosaukuma un pēc noklusējuma atgriež var() atsauci, lai vērtību varētu pārrakstīt izpildlaikā:

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

Pievienojiet inline, lai var() atsauces vietā ievietotu atrisināto vērtību: --theme(--color-brand inline). Otrais arguments ir rezerves vērtība (--theme(--color-brand, #000)), bet initial rezerves vērtība tiek apstrādāta īpaši — tā tiek ievietota ligzdotās var() atsaucēs, kuras pašas atrisinās kā initial. At-rule iekšienē (@media, @container) --theme() vienmēr tiek atrisināts uzreiz, jo šajās priekšdaļās nav derīgs var().

--spacing()

--spacing(n) reizina motīva pamata atstarpes vienību (--spacing) ar n:

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

Reizinātājs 1 tiek atrisināts kā pats bāzes mainīgais (--spacing(1) → var(--spacing), ko izvada arī p-1), savukārt 0 — kā vienkāršs nulles garums.

Šis ir tas pats aprēķins, ko izmanto iebūvētās atstarpju utilītprogrammas, tāpēc pielāgotās vērtības saskan ar p-4, m-4 un pārējām.

--alpha()

--alpha(color / opacity) piešķir krāsai necaurredzamību, izmantojot color-mix() oklab krāstelpā:

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

Forma color-mix() paliek pārrakstāma izpildlaikā; pirms tās norādītā statiskā rezerves vērtība, kas aprēķināta no motīva vērtības, paredzēta pārlūkprogrammām bez color-mix(). Izslēdziet rezerves vērtību ar opciju polyfills, kas pieejama tw::compile().

Necaurredzamības un color-mix() → oklab() apvienošana

Necaurredzamības modifikatori kombinējas. Piemērojot 50% vērtībai, kurai jau ir 50%, rezultāts ir 25%, kas aprēķināts oklab krāstelpā. Kad necaurredzamības modifikators tiek piemērots statiskai krāsai, TailwindPHP pārveido izteiksmi color-mix(in oklab, …) konkrētā oklab() vērtībā — tāpat kā lightningcss to dara augšupējā Tailwind rīku ķēdē — savukārt dinamiskās krāsas (tās, kas joprojām ietvertas var()) saglabā color-mix() formu, lai tās varētu mainīt izpildlaikā.

Motīva vērtību nolasīšana no PHP

Trīs piekļuves funkcijas atgriež atrisinātās motīva vērtības kā PHP masīvus. Katrai var norādīt ievades CSS virkni (noklusējums @import "tailwindcss";), un tās pieejamas arī kompilatora instancē.

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

Lai nolasītu pielāgota motīva vērtības, nododiet virkni 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 izmanto vienu bāzes vērtību --spacing, nevis --spacing-* skalu, tāpēc tw::spacing() atgriež tikai jūsu definētos pielāgotos marķierus --spacing-*. Kompilatora instancē ir pieejamas tās pašas metodes: $compiler->colors(), $compiler->breakpoints(), $compiler->spacing(). Pilnus parakstus skatiet API.

Nākamās darbības

• Direktīvas — @apply, @utility, @custom-variant, @layer.
• Importi — @import, virtuālie moduļi un Preflight.
• API — visas piekļuves un pārbaudes metodes.