Bir Tailwind Projesinde Özel Stilleri Yönetmek için CSS Kademeli Katmanlarını Kullanma

Bir yardımcı sınıf yalnızca bir şey yapıyorsa, başka bir yerden gelen stiller tarafından geçersiz kılınmasını istemezsiniz. Bir yaklaşım kullanmaktır !important %100 emin olmak için, özgünlük çakışmalarından bağımsız olarak stilin uygulanacağından emin olun.

Tailwind yapılandırma dosyasında bir !important otomatik olarak eklenecek seçenek !important her yardımcı sınıfa. kullanmanın bir sakıncası yok !important bu şekilde, ancak günümüzde özgüllüğü ele almanın daha iyi yolları var. kullanma CSS Kademeli Katmanlar ağır kullanım yaklaşımından kaçınabiliriz !important.

Kademeli katmanlar, stilleri "katmanlar" halinde gruplandırmamıza izin verir. Bir katmanın önceliği her zaman bir seçicinin özgüllüğünü yener. Özgüllük yalnızca her katmanın içinde önemlidir. Mantıklı bir katman düzeni oluşturmak, stil çatışmalarını ve özgünlük savaşlarını önlemeye yardımcı olur. CSS Cascade Layers'ı aşağıdakiler için harika bir araç yapan şey budur. üçüncü taraf çerçevelerden stillerin yanı sıra özel stilleri yönetme, Tailwind gibi.

Bir Tailwind kaynağı .css file genellikle şöyle bir şey başlatır:

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

Bir göz atalım resmi Tailwind belgeleri direktifler hakkında:

Yönergeler, Tailwind CSS projeleri için özel işlevler sunan CSS'nizde kullanabileceğiniz özel Tailwind'e özgü kurallardır. Kullan @tailwind Tailwind's eklemek için yönerge base, components, utilities ve variants stilleri CSS'nize ekleyin.

Oluşturulan çıktı CSS dosyasında, Tailwind'in CSS sıfırlaması - olarak bilinen Ön kontrol — ilk olarak temel stillerin bir parçası olarak dahil edilir. Geri kalanı base Tailwind'in çalışması için gereken CSS değişkenlerinden oluşur. components kendi özel sınıflarınızı ekleyebileceğiniz bir yerdir. İşaretlemenizde kullandığınız tüm yardımcı program sınıfları daha sonra görünecektir. Varyantlar, oluşturulan CSS dosyasında en son görünecek olan fareyle üzerine gelme ve odak durumları ve duyarlı stiller gibi şeyler için stillerdir.

Kuyruk Rüzgarı @layer Direktifler

Kafa karıştırıcı bir şekilde, Tailwind'in kendi @layer sözdizimi. Bu makale CSS standardı hakkındadır, ancak Tailwind sürümüne (derlenir ve CSS çıktısında sonlanmayan) hızlıca göz atalım. Kuyruk Rüzgarı @layer yönergesi, çıktı CSS dosyasının belirli bir bölümüne kendi ekstra stillerinizi enjekte etmenin bir yoludur.

Örneğin, kendi stillerinizi eklemek için base stilleri, aşağıdakileri yapardınız:

@layer base {
  h1 {
    font-size: 30px;
  }
}

The components katman varsayılan olarak boştur - yalnızca kendi sınıflarınızı koyabileceğiniz bir yerdir. İşleri Tailwind yöntemiyle yapıyor olsaydınız, muhtemelen @apply (Son zamanlarda Tailwind'in yaratıcısı olmasına rağmen buna karşı tavsiye), ancak sınıfları normal şekilde de yazabilirsiniz:

@layer components {
  .btn-blue {
    background-color: blue;
    color: white;
  }
}

CSS standardı çok daha güçlüdür. Buna geri dönelim…

CSS standardını kullanma @layer

CSS standardını kullanmak için bunu nasıl yeniden yazabiliriz @layer:

@layer tailwind-base, my-custom-styles, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind utilities;
  @tailwind variants;
} 

Tailwind yönergesinden farklı olarak, bunlar derlenmez. Tarayıcı tarafından anlaşılırlar. Aslında, Edge, Chrome, Safari ve Firefox'taki DevTools, tanımladığınız katmanları bile size gösterecektir.

İstediğiniz kadar katmana sahip olabilirsiniz ve bunlara istediğiniz şekilde ad verebilirsiniz, ancak bu örnekte, tüm özel stillerim tek bir katmandadır (my-custom-styles). İlk satır katman sırasını belirler:

@layer tailwind-base, my-custom-styles, tailwind-utilities;

Bunun önceden sağlanması gerekir. Bu satırı kullanan diğer kodlardan önce eklediğinizden emin olun. @layer. Listedeki ilk katman, en az güçlü ve listedeki son katman olacak çoğu güçlü. Bunun anlamı tailwind-base olduğunu en az güçlü katman ve içindeki herhangi bir kod, sonraki tüm katmanlar tarafından geçersiz kılınacaktır. Bu da demek oluyor ki tailwind-utilities her zaman diğer stilleri gölgede bırakacak - kaynak sırasına veya özgüllüğüne bakılmaksızın. (Yardımcı programlar ve varyantlar olabilir ayrı katmanlara gidin, ancak Tailwind'in koruyucuları, varyantları yardımcı programlar yönergesinin altına eklediğiniz sürece, varyantların her zaman yardımcı programlardan üstün olmasını sağlayacaktır.)

Bir katmanda olmayan herhangi bir şey, katmanda bulunan her şeyi geçersiz kılar (bir istisna dışında, !important). Yani, ayrılmayı da seçebilirsin utilities ve variants herhangi bir katmanın dışında:

@layer tailwind-base, tailwind-components, my-custom-styles;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-components {
  @tailwind components;
}

@tailwind utilities;
@tailwind variants;

Bu aslında bize ne satın aldı? Gelişmiş CSS seçicilerinin oldukça kullanışlı olduğu birçok zaman vardır. Bir sürümünü oluşturalım :focus-within kullanarak fare tıklamaları yerine yalnızca klavye odağına yanıt verir. :has seçici (hangisi Chrome 105'e girer). Bu, çocuklarından herhangi biri odak aldığında bir üst öğeye stil verecektir. Tailwind 3.1 tanıtıldı özel varyantlar - Örneğin <div class="[&:has(:focus-visible)]:outline-red-600"> - ancak bazen sadece CSS yazmak daha kolaydır:

@layer tailwind-base, my-custom-styles;
@layer tailwind-base {
  @tailwind base;
}

@tailwind utilities;

@layer my-custom-styles {
  .radio-container {
    padding: 4px 24px;
    border: solid 2px rgb(230, 230, 230);
  }
  .radio-container:has(:focus-visible) {
    outline: solid 2px blue;
  }
}

Diyelim ki sadece bir durumda geçersiz kılmak istiyoruz outline-color itibaren blue başka bir şeye. Diyelim ki birlikte çalıştığımız öğe hem Tailwind sınıfına sahip .outline-red-600 ve bizimki .radio-container:has(:focus-visible) sınıf:

<div class="outline-red-600 radio-container"> ... </div>

Hangi outline-color kazanacak?

Normalde, daha yüksek özgüllük .radio-container:has(:focus-visible) Bu, Tailwind sınıfının etkisinin olmadığı anlamına gelir - kaynak sıraya göre daha düşük olsa bile. Ancak, Tailwind'in aksine @layer kaynak sırasına dayanan yönerge, CSS standardı @layer özgüllüğü geçersiz kılar.

Sonuç olarak, karmaşık seçicileri kendi özel stillerimizde kullanabiliriz, ancak yine de gerektiğinde onları Tailwind'in yardımcı sınıflarıyla geçersiz kılarız - ağır işlere başvurmak zorunda kalmadan !important istediğimizi elde etmek için kullanın.