Tailwind'de “haklı içerik” ile Kesme Noktaları ve Medya Sorguları Nasıl Uygulanır?

” orta ve büyük ekran boyutunda öğelerinin yatay hizalamasını değiştirmek için öğe:

< vücut >

< div sınıf = 'flex justify-start md: justify-arasında lg: justify-end boşluk-3 m-3 bg-teal-700' >
< div sınıf = 'bg-sarı-400 w-24 sa-12' > 1 < / div >
< div sınıf = 'bg-sarı-400 w-24 h-12' > 2 < / div >
< div sınıf = 'bg-sarı-400 w-24 h-12' > 3 < / div >

< / div >

< / vücut >

Burada:

• “haklı başlangıç” class, esnek öğeleri kabın ana ekseninin başında hizalar.
• “md: iki yana yasla-arasında” class esnek öğeleri, orta ekran boyutunda aralarında eşit boşluk olacak şekilde kabın ana ekseni boyunca dağıtır.
• “lg: bitişi haklı çıkar” class, kapsayıcının ana ekseninin sonundaki esnek öğeleri büyük bir ekran boyutunda hizalar.

Çıktı

---

---

Yukarıdaki çıktı, ekran boyutu değiştikçe esnek öğelerin yatay hizalamasının değiştiğini gösterir. Bu, belirtilen kesme noktalarının ve ortam sorgularının 'haklı içerik' yardımcı programıyla etkili bir şekilde uygulandığını gösterir.

Çözüm

Tailwind'de 'haklı içerik' yardımcı programları ile kesme noktaları ve ortam sorguları uygulamak için istenen değeri “haklı göster-” “ kullanarak çeşitli ekran boyutları için yardımcı program md ' veya ' lg ” kesme noktaları. Doğrulama için web sayfasının ekran boyutunu değiştirin ve değişiklikleri sağlayın. Bu makale, Tailwind'deki 'içeriği gerekçelendir' yardımcı programlarında istenen kesme noktalarını ve medya sorgularını uygulama örneğini göstermiştir.