Variants

Variants, mevcut kurallarınıza bazı varyasyonlar uygulamanıza olanak tanır, Tailwind CSS'teki hover: varyantı gibi.

Example

variants: [
  // hover:
  (matcher) => {
    if (!matcher.startsWith('hover:'))
      return matcher
    return {
      // `hover:` önekini dilimle ve sonraki varyantlara ve kurallara ilet
      matcher: matcher.slice(6),
      selector: s => `${s}:hover`,
    }
  },
],
rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
]

• matcher, varyantın ne zaman etkinleştirildiğini kontrol eder. Dönüş değeri bir string ise, kuralları eşleştirmek için seçici olarak kullanılacaktır.
• selector, oluşturulan CSS seçicisini özelleştirme olanağı sağlar.

Under the hood

hover:m-2 için eşleşme yapılırken neler olduğuna bir tur atalım:

• hover:m-2, kullanıcı kullanımlarından çıkarılır
• hover:m-2, eşleştirme için tüm varyantlara gönderilir
• hover:m-2, varyantımız tarafından eşleştirilir ve m-2 döndürür
• sonuç m-2, bir sonraki varyant eşleştirme turu için kullanılacaktır
• başka bir varyant eşleşmezse, m-2 kuralları eşleştirmeye gidecektir
• ilk kuralımız eşleşir ve .m-2 { margin: 0.5rem; } oluşturur
• son olarak, varyantlarımızın dönüşümünü oluşturulan CSS'e uygularız. Bu durumda, selector kancasına :hover ekledik

Sonuç olarak, aşağıdaki CSS oluşturulacaktır:

.hover\:m-2:hover { margin: 0.5rem; }

Bununla, m-2'yi yalnızca kullanıcılar öğenin üzerine geldiğinde uygulayabiliriz.

Going further

Varyant sistemi çok güçlüdür ve bu kılavuzda tam olarak ele alınamaz, daha gelişmiş kullanımları görmek için varsayılan preset'in uygulamasını kontrol edebilirsiniz.