@source Yönergesi
@source, girdi CSS dosyanızda yer alır. inline() biçimleri sınıf adaylarını ekler veya kaldırır ve her yerde çalışır. Yol biçimleri, sınıf adları için taranacak şablon dosyalarını belirtir; yalnızca CLI dosyaları tarar ve verdiğiniz yolları henüz uygulamaz (bkz. Yolların kullanımı).
@import "tailwindcss";
@source "./templates";
@source yönergeleri derleme sırasında okunur ve çıktıdan kaldırılır; oluşturulan CSS içinde asla yer almaz. Yollar tırnak içinde olmalıdır; tek ve çift tırnak işaretleri kabul edilir.
Yollar, glob kalıpları ve olumsuzlama
Yol biçimi bir dizini, glob kalıbını veya olumsuzlanmış bir yolu kabul eder; yönergeler birikimli olarak uygulanır:
@source "./templates"; /* a directory */
@source "./components/**/*.php"; /* a glob */
@source not "./templates/legacy"; /* an exclusion */
Yollar nasıl kullanılır
Derleyici, her yol yönergesini TailwindPHP\compile() tarafından döndürülen dizinin sources listesine, base derleme seçeneğinden alınan base ile birlikte ['base' => …, 'pattern' => …, 'negated' => …] olarak kaydeder. Dosyaları kendisi hiçbir zaman okumaz.
tw::generate(),tw::compile()veTailwindCompileryalnızca ilettiğiniz içeriği derler. Yol yönergelerinin burada etkisi yoktur.- CLI,
sourcesöğesini okur; ancak mevcut sürümde yol veya glob ne söylerse söylesin, her olumsuzlanmamış yol için girdi dosyasının dizinini özyinelemeli olarak tarar venotyollarını tamamen atlar; dolayısıyla bu yollar hiçbir şeyi hariç tutmaz (#8). Günümüzde çalışan ayrıntılar ve bir dosya düzeni için What the CLI scans bölümüne bakın.
Satır içi adaylar
@source inline(...), taranan dosyalarda hiç görünmeseler bile sınıfları çıktıya ekler; bu, çalışma zamanında dinamik olarak birleştirilen sınıf adları için kullanışlıdır:
@source inline("flex p-4 m-2");
Satır içi adaylar varyantları da destekler:
@source inline("hover:bg-blue-500 focus:ring-2");
Süslü parantez genişletmesi
Satır içi kalıplar süslü parantez gruplarını genişleterek çok sayıda adayı kısa biçimde sıralamanızı sağlar:
@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 */
Yok sayılan satır içi adaylar
@source not inline(...), inline() işleminin tersini yapar: içeriğinizde bulunmuş olsalar bile eşleşen adayları çıktıdan çıkarır. Burada da süslü parantez genişletmesi kullanılabilir:
@source not inline("legacy");
@source not inline("p-{1,2}");
Doğrulama kuralları
@source bir blok değil, ifadedir. Derleyici şunları reddeder:
- Gövdeli bir yönerge —
@source cannot have a body. - İç içe bir yönerge (örneğin
@mediaiçinde) —@source cannot be nested. - Tırnak içine alınmamış bir yol —
@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;
Dosya tabanlı derlemeler için CLI bölümüne, @import ve sanal modüllerin çözümlenmesi için İçe Aktarımlar bölümüne bakın.