İçeriğe geç

@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ı).

CSS
@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:

CSS
@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() ve TailwindCompiler yalnı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 ve not yolları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:

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

Satır içi adaylar varyantları da destekler:

CSS
@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:

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

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:

CSS
@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 @media içinde) — @source cannot be nested.
  • Tırnak içine alınmamış bir yol — @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;

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.