Impordid ja virtuaalmoodulid

TailwindPHP lahendab @import reeglid enne kompileerimist. Impordid võivad viidata sisseehitatud virtuaalmoodulitele (tailwindcss ja teised), kettal asuvatele failidele valiku importPaths kaudu või mis tahes sisule, mille tagastab kohandatud lahendaja.

Virtuaalmoodulid

@import "tailwindcss" on enamiku projektide lähtekoht. See laieneb neljaks alltoodud reaks: kihi järjekorra deklaratsiooniks ja kolmeks alamimpordiks, millest igaüks määratakse oma kaskaadikihti:

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

Iga alamimport on samuti virtuaalmoodul, mida saab eraldi importida. Saadaolevad virtuaalmoodulid on järgmised:

Osade eraldi importimine võimaldab Preflighti vahele jätta või kihtide järjekorda muuta (vt allpool).

Animatsioonid mooduliga tw-animate-css

tw-animate-css on TailwindCSS v4 animatsiooniteek — vahetu asendus paketile tailwindcss-animate. See on saadaval sisseehitatud virtuaalmoodulina, nii et selle importimisel koos utiliitide kihiga kompileeritakse sisenemis- ja väljumisanimatsiooni klassid nagu kõik muudki utiliidid:

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

Animatsiooniutiliidid hõlmavad järgmist:

• Sisenemine / väljumine — animate-in, animate-out
• Hajumine — fade-in, fade-out
• Suum — zoom-in, zoom-out
• Pöörlemine — spin-in, spin-out
• Hägu — blur-in, blur-out
• Liug — slide-in-from-top / -bottom / -left / -right ja vastavad slide-out-to-*-klassid, lisaks RTL-i arvestavad -start / -end
• Ajastus — duration-*, delay-*, repeat-1 / repeat-infinite, direction-normal / -reverse / -alternate ja fill-mode-none / -forwards / -backwards / -both
• Esituse olek — running, paused
• Komponentide animatsioonid — accordion-down / accordion-up, collapsible-down / collapsible-up ja caret-blink

Need klassid toimivad koos Tailwind-variantidega nagu teisedki utiliidid ning sobivad hästi shadcn/ui-dialoogide ja rippmenüüde kujundusmustritega.

Valik importPaths

Et lahendada @import failisüsteemi põhjal, anna valik importPaths massiivikujulisele generate()-ile. See võtab vastu ühe tee, kataloogi või nende massiivi.

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',
]);

Pesastatud impordid

Laaditud failis olevad impordid lahendatakse selle faili asukoha suhtes. Kui /path/to/styles.css sisaldab @import "./components/buttons.css", lahendatakse tee asukohas /path/to/:

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

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

Duplikaatide eemaldamine

Sama faili või virtuaalmooduli korduv importimine ei tee pärast esimest korda midagi — korduvad read @import "tailwindcss" või kaks faili, mis impordivad sama osafaili, eemaldatakse automaatselt duplikaatidena. See aitab vältida ka ringimporditud faile.

Kohandatud lahendaja

Virtuaalsete failisüsteemide, andmebaaside või mis tahes muu kui failisüsteemi allika korral anna kutsutav funktsioon argumendiks importPaths. See saab impordi URI ja baaskataloogi, mille suhtes importi lahendatakse, ning tagastab CSS või 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
    },
]);

Kui $uri on null (esimene väljakutse, mille teine argument on samuti null), tagasta alguspunkti CSS. Mis tahes muu URI korral tagasta selle sisu kujul CSS või tagasta null, et jätkata otsingut failisüsteemist. Kui midagi ei leita, jäetakse import vaikselt vahele.

Preflight

Preflight on Tailwind-i arvamuslik baastasemel lähtestus, mis põhineb teegil modern-normalize. See ühtlustab brauserite erinevusi, et utiliidid toimiksid etteaimatavalt. Muu hulgas eemaldab see vaikimisi veerised, eemaldab pealkirjade ja loendite erikujunduse, muudab pildid plokielementideks, lähtestab ääriste stiilid nii, et äärise joonistab ainult border-width, ning paneb nupud pärima fondi.

Preflight sisaldub paketis @import "tailwindcss" — kui impordid kogu komplekti, on see juba kasutusel:

use TailwindPHP\tw;

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

Preflighti laiendamine

Lisa Preflighti peale oma baastaseme stiilid valikuga @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; }
        }
    ',
]);

Preflighti väljalülitamine

Olemasolevasse projekti integreerimisel impordi ainult vajalikud osad ja jäta Preflighti rida välja:

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);
    ',
]);

Impordimodifikaatorid

Kui impordid Tailwind-i faile ükshaaval, lisa modifikaatorid importidele, mida need mõjutavad:

/* 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);

Viiteimpordid

@import "…" reference laadib faili ainult selle definitsioonide jaoks: @theme väärtused ning selles määratletud @utility ja @custom-variant on kasutatavad, kuid fail ei väljasta oma CSS. See on sama, mis faili sisu ümbritsemine märgendiga @media reference { … }, mille saad ka otse kirjutada:

@import "tailwindcss/utilities.css";

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

bg-brand kompileeritakse seejärel kujule background-color: var(--color-brand, #f00); ja deklaratsiooni --color-brand ei väljastata.

Käesolevas versioonis on kaks piirangut (#14):

• Paiguta viiteimpordid ja @media reference-plokid pärast @import-i tailwindcss või tailwindcss/utilities.css sees. Kui need paiknevad enne, jääb kogu väljund tühjaks.
• reference-il sisseehitatud virtuaalmoodulite (@import "tailwindcss" reference;) puhul veel mõju pole: teema, Preflight ja utiliidid väljastatakse ikkagi.

Jätka teemamuutujate kohta lehelt Theme või vaata, kuidas määrata skannitavaid klassinimesid lehelt @source.