Importai ir virtualieji moduliai

TailwindPHP prieš kompiliavimą išsprendžia @import taisykles. Importai gali nurodyti integruotus virtualiuosius modulius (tailwindcss ir kitus), diske esančius failus per parinktį importPaths arba bet ką, ką grąžina tinkintas sprendiklis.

Virtualieji moduliai

@import "tailwindcss" yra daugelio projektų naudojamas pradinis failas. Jis išplečiamas į keturias toliau pateiktas eilutes: pakopų sluoksnių tvarkos deklaraciją ir tris importus, kurių kiekvienas priskirtas savo pakopų sluoksniui:

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

Kiekvienas importas pats yra virtualusis modulis, kurį galima importuoti atskirai. Galimi virtualieji moduliai:

Importuodami dalis atskirai galite praleisti Preflight arba pakeisti sluoksnių tvarką (žr. toliau).

Animacijos su tw-animate-css

tw-animate-css yra animacijų biblioteka TailwindCSS v4 – tiesiogiai pakeičiama biblioteka tailwindcss-animate. Ji pateikiama kaip integruotasis virtualusis modulis, todėl importavus ją kartu su paslaugų sluoksniu įėjimo ir išėjimo animacijų klasės kompiliuojamos kaip bet kuri kita paslauga:

@import "tw-animate-css";
@import "tailwindcss/utilities.css";

Animacijos paslaugos apima:

• Įėjimas / išėjimas – animate-in, animate-out
• Išnykimas / pasirodymas – fade-in, fade-out
• Priartinimas – zoom-in, zoom-out
• Sukimas – spin-in, spin-out
• Suliejimas – blur-in, blur-out
• Slinkimas – slide-in-from-top / -bottom / -left / -right ir atitinkamas slide-out-to-*, taip pat RTL pritaikyti -start / -end
• Laikas – duration-*, delay-*, repeat-1 / repeat-infinite, direction-normal / -reverse / -alternate ir fill-mode-none / -forwards / -backwards / -both
• Atkūrimo būsena – running, paused
• Komponentų animacijos – accordion-down / accordion-up, collapsible-down / collapsible-up ir caret-blink

Šias klases galima jungti su variantais Tailwind kaip ir bet kurią kitą paslaugą, todėl jos puikiai tinka shadcn/ui dialogų ir išskleidžiamųjų sąrašų šablonams.

Parinktis importPaths

Kad @import būtų išspręstas pagal failų sistemą, perduokite importPaths masyvo formoje generate(). Priimamas vienas kelias, katalogas arba jų masyvas.

use TailwindPHP\tw;

// Single file
$css = tw::generate([
    'content'     => '<div class="flex btn">Hello</div>',
    'importPaths' => '/path/to/styles.css',
]);

// Directory (loads all .css files alphabetically)
$css = tw::generate([
    'content'     => '<div class="flex btn">Hello</div>',
    'importPaths' => '/path/to/css/',
]);

// Multiple paths — files and directories
$css = tw::generate([
    'content'     => '<div class="flex btn card">Hello</div>',
    'importPaths' => [
        '/path/to/base.css',
        '/path/to/components/',
    ],
]);

// Combine with inline css
$css = tw::generate([
    'content'     => '<div class="flex btn custom">Hello</div>',
    'css'         => '.custom { color: red; }',
    'importPaths' => '/path/to/styles.css',
]);

Įdėtieji importai

Įkeliamame faile esančių importų keliai sprendžiami santykinai su tuo failu. Jei /path/to/styles.css yra @import "./components/buttons.css", kelias sprendžiamas pagal /path/to/:

/* /path/to/styles.css */
@import "tailwindcss";
@import "./components/buttons.css";
@import "./components/cards.css";

@theme {
    --color-brand: #3b82f6;
}

Dublikatų pašalinimas

Tą patį failą ar virtualų modulį importuojant daugiau nei vieną kartą, po pirmo karto nieko nebedaroma — pasikartojančios @import "tailwindcss" eilutės arba du failai, importuojantys tą patį dalinį failą, automatiškai pašalinami kaip dublikatai. Taip pat apsaugoma nuo ciklinių importų.

Pasirinktinis sprendiklis

Virtualioms failų sistemoms, duomenų bazėms ar bet kokiam ne failų sistemos šaltiniui kaip importPaths perduokite iškviečiamą funkciją. Jai pateikiamas importo URI ir bazinis katalogas, pagal kurį sprendžiamas importas; ji grąžina CSS arba null:

use TailwindPHP\tw;

$css = tw::generate([
    'content'     => '<div class="flex virtual-class">Hello</div>',
    'importPaths' => function (?string $uri, ?string $fromFile): ?string {
        if ($uri === null) {
            // Entry CSS — returned when no file is supplied
            return '@import "tailwindcss"; @import "custom.css";';
        }
        if ($uri === 'custom.css') {
            return '.virtual-class { color: purple; }';
        }
        return null; // Unknown imports are silently skipped
    },
]);

Kai $uri yra null (pirmasis iškvietimas, kurio antrasis argumentas taip pat yra null), grąžinkite įrašo CSS reikšmę. Bet kuriam kitam URI grąžinkite jo turinį CSS arba null, kad būtų ieškoma failų sistemoje; jei nieko nerandama, importas tyliai praleidžiamas.

Išankstinis nustatymas

Preflight yra griežta Tailwind bazinių stilių atstata, sukurta remiantis modern-normalize. Ji suvienodina naršyklių skirtumus, kad pagalbinės klasės veiktų nuspėjamai. Be kita ko, pašalina numatytąsias paraštes, panaikina antraščių ir sąrašų stilius, nustato blokinį vaizdų rodymą, atstato kraštinių stilius, kad kraštinę pieštų tik border-width, ir leidžia mygtukams paveldėti šriftus.

Preflight įtrauktas į @import "tailwindcss" — jei importuojate visą paketą, jį jau turite:

use TailwindPHP\tw;

$css = tw::generate([
    'content' => '<div class="flex p-4">Hello</div>',
    'css'     => '@import "tailwindcss";',
]);

Preflight plėtiniai

Pridėkite savo bazinius stilius ant Preflight stilių naudodami @layer base:

use TailwindPHP\tw;

$css = tw::generate([
    'content' => '<article><h1>Title</h1><p>Content</p></article>',
    'css'     => '
        @import "tailwindcss";
        @layer base {
            h1 { font-size: var(--text-2xl); }
            h2 { font-size: var(--text-xl); }
            a  { color: var(--color-blue-600); text-decoration-line: underline; }
        }
    ',
]);

Preflight išjungimas

Integruodami į esamą projektą, importuokite tik reikiamas dalis ir praleiskite Preflight eilutę:

use TailwindPHP\tw;

$css = tw::generate([
    'content' => '<div class="flex p-4">Hello</div>',
    'css'     => '
        @layer theme, base, components, utilities;
        @import "tailwindcss/theme.css" layer(theme);
        @import "tailwindcss/utilities.css" layer(utilities);
    ',
]);

Importo modifikatoriai

Importuojant Tailwind failus atskirai, modifikatorius nurodykite prie importų, kuriems jie taikomi:

/* Assign the import to a cascade layer */
@import "tailwindcss/utilities.css" layer(utilities);

/* prefix affects both theme variables and utilities */
@import "tailwindcss/theme.css" layer(theme) prefix(tw);
@import "tailwindcss/utilities.css" layer(utilities) prefix(tw);

/* important affects utilities */
@import "tailwindcss/utilities.css" layer(utilities) important;

/* theme(static) or theme(inline) affects theme variables */
@import "tailwindcss/theme.css" layer(theme) theme(static);

/* theme(reference): utilities use the variables with a fallback, no :root block */
@import "tailwindcss/theme.css" layer(theme) theme(reference);

Nuorodiniai importai

@import "…" reference įkelia failą tik jo apibrėžtims: jame esančias @theme reikšmes, @utility ir @custom-variant apibrėžtis galima naudoti, tačiau pats failas neišveda jokio CSS. Tai tas pats, kas failo turinį įterpti į @media reference { … }; galite tai užrašyti ir tiesiogiai:

@import "tailwindcss/utilities.css";

@media reference {
    @theme {
        --color-brand: #f00;
    }
}

bg-brand tada sukompiliuojamas į background-color: var(--color-brand, #f00);, o jokia --color-brand deklaracija neišvedama.

Du dabartinio leidimo apribojimai (#14):

• Nuorodinius importus ir @media reference blokus dėkite po @import, priklausančio tailwindcss arba tailwindcss/utilities.css. Jei jie įterpti prieš jį, visa išvestis būna tuščia.
• reference šiuo metu neveikia integruotuose virtualiuose moduliuose (@import "tailwindcss" reference;): tema, Preflight ir pagalbinės klasės vis tiek išvedamos.

Toliau skaitykite apie Theme temos kintamiesiems arba @source, kuriuo valdoma, kurie failai tikrinami ieškant klasių pavadinimų.