Lewati ke konten

Direktif @source

Lihat sebagai Markdown Edit di GitHub Dokumentasi di 3843abd

@source berada di CSS input Anda. Bentuk inline() menambah atau menghapus kandidat kelas dan berfungsi di mana saja. Bentuk jalurnya menyebut file templat yang dipindai untuk mencari nama kelas; hanya CLI yang memindai file, dan saat ini belum menerapkan jalur yang Anda berikan (lihat Cara jalur digunakan).

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

Direktif @source dibaca selama kompilasi dan dihapus dari output — direktif ini tidak pernah muncul dalam CSS yang dihasilkan. Jalur harus diapit tanda kutip; tanda kutip tunggal dan ganda dapat digunakan.

Jalur, glob, dan negasi

Bentuk jalur menerima direktori, glob, atau jalur yang dinegasikan, dan direktifnya terakumulasi:

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

Cara jalur digunakan

Compiler mencatat setiap direktif jalur dalam daftar sources pada array yang dikembalikan oleh TailwindPHP\compile(), sebagai ['base' => …, 'pattern' => …, 'negated' => …] dengan base diambil dari opsi kompilasi base. Compiler tidak pernah membaca file itu sendiri.

  • tw::generate(), tw::compile(), dan TailwindCompiler hanya mengompilasi konten yang Anda teruskan. Direktif jalur tidak berpengaruh di sana.
  • CLI membaca sources, tetapi pada rilis saat ini alat tersebut memindai direktori file input secara rekursif untuk setiap jalur yang tidak dinegasikan, apa pun isi jalur atau globnya, dan melewati sepenuhnya jalur not, sehingga jalur tersebut tidak mengecualikan apa pun (#8). Yang dipindai oleh CLI menjelaskan detailnya dan memberikan susunan yang berfungsi saat ini.

Kandidat sebaris

@source inline(...) memaksakan kelas masuk ke output meskipun kelas tersebut tidak pernah muncul dalam file yang dipindai — berguna untuk nama kelas yang dirangkai secara dinamis saat runtime:

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

Kandidat sebaris juga mendukung varian:

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

Ekspansi kurung kurawal

Pola sebaris memperluas kelompok kurung kurawal, sehingga Anda dapat mencantumkan banyak kandidat secara ringkas:

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

Kandidat sebaris yang diabaikan

@source not inline(...) melakukan kebalikan dari inline() — direktif ini menghapus kandidat yang cocok dari output, bahkan jika kandidat itu ditemukan dalam konten Anda. Ekspansi kurung kurawal juga berfungsi di sini:

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

Aturan validasi

@source adalah pernyataan, bukan blok. Compiler menolak:

  • Direktif yang memiliki body — @source cannot have a body.
  • Direktif bersarang (misalnya di dalam @media) — @source cannot be nested.
  • Jalur yang tidak diapit tanda kutip — @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;

Lihat CLI untuk build berbasis file, dan Impor untuk menyelesaikan @import dan modul virtual.