Importi un virtuālie moduļi

TailwindPHP pirms kompilēšanas atrisina @import noteikumus. Importi var norādīt uz iebūvētiem virtuāliem moduļiem (tailwindcss un citiem), diska failiem, izmantojot opciju importPaths, vai jebkuru resursu, ko atgriež pielāgots atrisinātājs.

Virtuālie moduļi

@import "tailwindcss" ir sākumpunkts, ko izmanto lielākā daļa projektu. Tas izvēršas četrās tālāk redzamajās rindās — slāņu secības deklarācijā un trīs apakšimportos, no kuriem katrs piešķirts savam kaskādes slānim:

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

Katrs apakšimports pats par sevi ir virtuāls modulis, ko var importēt atsevišķi. Pieejamie virtuālie moduļi:

Importējot daļas atsevišķi, var izlaist Preflight vai mainīt slāņu secību (skatiet tālāk).

Animācijas ar tw-animate-css

tw-animate-css ir TailwindCSS v4 animāciju bibliotēka — tūlītēji izmantojama alternatīva tailwindcss-animate. Tā ir pieejama kā iebūvēts virtuālais modulis, tāpēc, importējot to kopā ar utilītu slāni, tās ienākšanas un iziešanas animāciju klases tiek kompilētas tāpat kā jebkura cita utilīta:

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

Animāciju utilītas ietver:

• Ienākšana / iziešana — animate-in, animate-out
• Pakāpeniska parādīšanās — fade-in, fade-out
• Tālummaiņa — zoom-in, zoom-out
• Griešanās — spin-in, spin-out
• Aizmiglojums — blur-in, blur-out
• Slīdēšana — slide-in-from-top / -bottom / -left / -right un atbilstošais slide-out-to-*, kā arī rakstīšanas virzienam pielāgotie -start / -end
• Laika iestatījumi — duration-*, delay-*, repeat-1 / repeat-infinite, direction-normal / -reverse / -alternate un fill-mode-none / -forwards / -backwards / -both
• Atskaņošanas stāvoklis — running, paused
• Komponentu animācijas — accordion-down / accordion-up, collapsible-down / collapsible-up un caret-blink

Šīs klases var kombinēt ar Tailwind variantiem tāpat kā jebkuru citu utilītu, tāpēc tās ir uzreiz piemērotas shadcn/ui dialoga un nolaižamo izvēļņu modeļiem.

Opcija importPaths

Lai atrisinātu @import, izmantojot failu sistēmu, padodiet importPaths masīva formā generate(). Tā pieņem vienu ceļu, direktoriju vai to masīvu.

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

Ligzdoti importi

Importi ielādētā failā tiek atrisināti attiecībā pret šo failu. Ja /path/to/styles.css satur @import "./components/buttons.css", ceļš tiek atrisināts attiecībā pret /path/to/:

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

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

Dublikātu novēršana

Pēc pirmās importēšanas atkārtota tā paša faila vai virtuālā moduļa importēšana neko nedara — atkārtotas @import "tailwindcss" rindas vai divi faili, kas importē vienu un to pašu daļfailu, tiek automātiski apvienoti. Tas arī novērš cikliskus importus.

Pielāgots atrisinātājs

Virtuālām failu sistēmām, datubāzēm vai citiem avotiem, kas nav failu sistēmas, padodiet izsaucamu funkciju kā importPaths. Tā saņem importa URI un pamata direktoriju, attiecībā pret kuru imports tiek atrisināts, un atgriež CSS vai 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
    },
]);

Ja $uri ir null (pirmais izsaukums, arī otrais arguments ir null), atgrieziet sākuma CSS. Jebkuram citam URI atgrieziet tā saturu CSS vai null, lai izmantotu failu sistēmas meklēšanu; ja nekas netiek atrasts, imports tiek klusi izlaists.

Preflight

Preflight ir Tailwind izteikts pamata atiestatījums, kas veidots uz modern-normalize. Tas izlīdzina pārlūkprogrammu atšķirības, lai utilītas darbotos paredzami. Cita starpā tas noņem noklusējuma ārējās atkāpes, atceļ virsrakstu un sarakstu stilu, attēlus attēlo kā bloka elementus, atiestata apmaļu stilus, lai apmali zīmētu tikai border-width, un ļauj pogām mantot fontus.

Preflight ir iekļauts @import "tailwindcss" — ja importējat visu pakotni, tas jau ir pieejams:

use TailwindPHP\tw;

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

Preflight paplašināšana

Pievienojiet savus pamata stilus virs Preflight, izmantojot @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 atspējošana

Integrējot esošā projektā, importējiet tikai nepieciešamās daļas un izlaidiet Preflight rindu:

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

Importu modifikatori

Importējot Tailwind failus atsevišķi, modifikatorus pievienojiet importiem, uz kuriem tie attiecas:

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

Atsauces importi

@import "…" reference ielādē failu tikai definīcijām: tajā esošās @theme vērtības, @utility un @custom-variant definīcijas ir izmantojamas, taču pats fails neģenerē nekādu CSS. Tas ir tas pats, kas ietvert faila saturu @media reference { … }, ko varat arī uzrakstīt tieši:

@import "tailwindcss/utilities.css";

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

bg-brand pēc tam tiek kompilēts uz background-color: var(--color-brand, #f00);, un netiek ģenerēta nekāda deklarācija --color-brand.

Divi ierobežojumi pašreizējā laidienā (#14):

• Atsauces importus un @media reference blokus ievietojiet pēc @import elementa tailwindcss vai tailwindcss/utilities.css. Ja tie ievietoti pirms tā, visa izvade ir tukša.
• reference iebūvētajiem virtuālajiem moduļiem (@import "tailwindcss" reference;) pagaidām neko nemaina: motīvs, Preflight un utilītas joprojām tiek ģenerēti.

Turpiniet sadaļā Motīvs, lai uzzinātu par motīva mainīgajiem, vai sadaļā @source, lai noteiktu, kuros failos tiek meklēti klašu nosaukumi.