Hoppa till innehåll

Direktivet @source

@source används i din indatasträng CSS. Dess inline()-former lägger till eller tar bort klasskandidater och fungerar överallt. Sökvägsformerna anger vilka mallfiler som ska skannas efter klassnamn; endast CLI skannar filer, och den använder ännu inte sökvägarna du anger (se Så används sökvägar).

CSS
@import "tailwindcss";
@source "./templates";

@source-direktiv läses under kompileringen och tas bort från utdata – de förekommer aldrig i den genererade CSS. Sökvägar måste stå inom citattecken; både enkla och dubbla citattecken godtas.

Sökvägar, globbar och negation

Sökvägsformen godtar en katalog, en glob eller en negerad sökväg, och direktiven ackumuleras:

CSS
@source "./templates";              /* a directory */
@source "./components/**/*.php";    /* a glob */
@source not "./templates/legacy";   /* an exclusion */

Så används sökvägar

Kompilatorn registrerar varje sökvägsdirektiv i listan sources i arrayen som TailwindPHP\compile() returnerar, som ['base' => …, 'pattern' => …, 'negated' => …] med base hämtat från kompileringsalternativet base. Den läser aldrig filer själv.

  • tw::generate(), tw::compile() och TailwindCompiler kompilerar bara innehållet du skickar med. Sökvägsdirektiv påverkar dem inte.
  • CLI läser sources, men i den aktuella versionen skannar den indatans katalog rekursivt efter varje icke-negerad sökväg, oavsett vad sökvägen eller globben anger, och hoppar helt över not-sökvägar så att de inte utesluter något (#8). Vad CLI skannar innehåller detaljerna och en struktur som fungerar i dag.

Inlinekandidater

@source inline(...) tvingar med klasser i utdata även om de aldrig förekommer i skannade filer – användbart för klassnamn som sätts ihop dynamiskt vid körning:

CSS
@source inline("flex p-4 m-2");

Inlinekandidater stöder även varianter:

CSS
@source inline("hover:bg-blue-500 focus:ring-2");

Klammanslagning

Inline-mönster expanderar grupper inom klamrar, så att du kan ange många kandidater kompakt:

CSS
@source inline("p-{1,2,4}");
/* Generates p-1, p-2, and p-4 */

@source inline("text-{red,blue}-500");
/* Generates text-red-500 and text-blue-500 */

Ignorerade inlinekandidater

@source not inline(...) gör motsatsen till inline() – det tar bort matchande kandidater från utdata även om de hittades i innehållet. Klamexpansion fungerar även här:

CSS
@source not inline("legacy");
@source not inline("p-{1,2}");

Valideringsregler

@source är en sats, inte ett block. Kompilatorn avvisar:

  • Ett direktiv med ett innehåll – @source cannot have a body.
  • Ett nästlat direktiv (till exempel inuti @media) – @source cannot be nested.
  • En sökväg utan citattecken – @source paths must be quoted.
CSS
/* Invalid — throws "`@source` cannot have a body." */
@source "./src" {
    .some-style { color: red; }
}

/* Invalid — throws "`@source` paths must be quoted." */
@source ./src;

Se CLI för filbaserade byggen och Importer för att lösa @import och virtuella moduler.