Bu yazı, Tailwind CSS'deki 'taşma' yardımcı programlarında kesme noktaları ve medya sorguları uygulama yöntemini gösterecektir.
Tailwind'de 'taşma' ile Kesme Noktalarından ve Medya Sorgularından Nasıl Yararlanılır?
Tailwind'deki 'taşma' yardımcı programlarında belirli kesme noktalarını ve medya sorgularını uygulamak için bir HTML yapısı oluşturun. Ardından, “ md ' veya ' lg ” istenen ile kesme noktaları 'taşma-
Örnek
Bu örnekte, “md” ile kırılma noktası “taşma-kaydırma” kullanışlılık
kaydırma çubuklarını eklemek ve bunları her zaman orta ekran boyutunda göstermek için kapsayıcı: < vücut >
< div sınıf = 'taşma-otomatik md:taşma-kaydırma bg-mor-300 p-4 mx-16 mt-5 h-36 metin-yaslama' >
Tailwind CSS, aşağıdakiler gibi çeşitli 'taşma' yardımcı programları sağlar:
“taşma-otomatik”, “taşma-kaydırma”, “taşma-gizli”, “taşma-görünür”
vb. Bu yardımcı programlar, belirli bir öğenin içeriği nasıl işlediğini belirler.
bu konteyner boyutunu aşıyor. Her yardımcı program benzersiz işlevsellik sunar,
ancak, nihai hedefleri aynı kalır, yani taşmayı kontrol etmek
Seçilen öğenin davranışı.
< / div >
< / vücut >
Burada:
- bu “taşma-otomatik” sınıf, kaydırma çubuklarını eklemek için kullanılır. kapsayıcı ve bunları yalnızca kaydırma gerektiğinde gösterin.
- bu “md:taşma-kaydırma” sınıf, kaydırma çubuklarını ekler ve bunları her zaman “md” kesme noktası (orta ekran boyutu).
Çıktı:
Yukarıdaki çıktıya göre kesme noktaları ve ortam sorguları 'taşma' yardımcı programlarında başarıyla uygulandı.
Çözüm
Tailwind'deki 'taşma' yardımcı programlarında kesme noktaları ve medya sorguları uygulamak için ' sm ”, “ md ' veya ' lg ” istenen ile kesme noktaları “ taşma-