@source-direktiivi

@source kuuluu syöte-CSS:een. Sen inline()-muodot lisäävät tai poistavat luokkaehdokkaita, ja ne toimivat kaikkialla. Polkumuodot nimeävät luokkien nimien skannattavat mallipohjatiedostot; vain CLI skannaa tiedostoja, mutta ei vielä käytä sille annettuja polkuja (katso Polkujen käyttö).

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

@source-direktiivit luetaan käännöksen aikana ja poistetaan tulosteesta — niitä ei koskaan näy luodussa CSS-tiedostossa. Polut on lainattava, ja sekä yksinkertaiset että kaksinkertaiset lainausmerkit käyvät.

Polut, glob-kuviot ja poissulkeminen

Polkumuodossa voi käyttää hakemistoa, glob-kuviota tai poissuljettua polkua, ja direktiivit kertyvät yhteen:

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

Polkujen käyttö

Kääntäjä tallentaa kaikki polkudirektiivit TailwindPHP\compile()-funktion palauttaman taulukon sources-luetteloon muodossa ['base' => …, 'pattern' => …, 'negated' => …], jossa base tulee base-käännösasetuksesta. Se ei koskaan lue tiedostoja itse.

• tw::generate(), tw::compile() ja TailwindCompiler kääntävät vain niille välittämäsi sisällön. Polkudirektiivit eivät vaikuta niihin.
• CLI lukee sources, mutta nykyisessä julkaisussa se skannaa syötetiedoston hakemiston rekursiivisesti jokaisen poissulkemattoman polun osalta polusta tai glob-kuviosta riippumatta ja ohittaa not-polut kokonaan, joten ne eivät sulje mitään pois (#8). Mitä CLI skannaa sisältää lisätiedot ja tällä hetkellä toimivan hakemistorakenteen.

Sisällytettävät ehdokkaat

@source inline(...) pakottaa luokat tulosteeseen, vaikka niitä ei esiintyisi skannatuissa tiedostoissa. Tämä on hyödyllistä ajon aikana dynaamisesti muodostettaville luokkanimille:

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

Sisällytettävät ehdokkaat tukevat myös muunnelmia:

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

Aaltosuljen laajennus

Sisällytettävät kuviot laajentavat aaltosuleryhmät, joten voit luetella monta ehdokasta tiiviisti:

@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 */

Ohitettavat ehdokkaat

@source not inline(...) tekee päinvastoin kuin inline(): se poistaa vastaavat ehdokkaat tulosteesta, vaikka ne löytyisivät sisällöstäsi. Aaltosuljelaajennus toimii myös tässä:

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

Validointisäännöt

@source on lauseke, ei lohko. Kääntäjä hylkää seuraavat:

• Direktiivi, jolla on runko — @source cannot have a body.
• Sisäkkäinen direktiivi (esimerkiksi @media-rakenteen sisällä) — @source cannot be nested.
• Lainaamaton polku — @source paths must be quoted.

/* Invalid — throws "`@source` cannot have a body." */
@source "./src" {
    .some-style { color: red; }
}

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

Katso CLI tiedostopohjaisia koonteja varten ja Imports osiosta ohjeet @import-määritysten ja virtuaalimoduulien ratkaisemiseen.