Tailwind CSS şunları sağlar: temizlemek ” Belirli bir öğenin, herhangi bir kayan öğenin yanındayken davranışını kontrol eden yardımcı programlar. Örneğin, 'sol-temiz' ve 'sağ-temiz' yardımcı program sınıfları, geliştiricilerin belirtilen öğeleri kapsayıcıdaki herhangi bir sola kayan veya sağa kayan öğenin altına taşımasını sağlar. Ancak bazen kullanıcılar, belirli öğelere uygulanan herhangi bir temizlemeyi devre dışı bırakmak ve kayan öğelerin yanında görünmelerine izin vermek ister. Bu gibi durumlarda, öğenin varsayılan değerini tanımlamak için 'clear-none' yardımcı programı kullanılabilir.
Bu makale, Tailwind CSS'de uygulanan tüm temizlemeleri devre dışı bırakma prosedürünü örnekleyecektir.
Tailwind'de Uygulanan Tüm Temizlemeleri Nasıl Devre Dışı Bırakırım?
Tailwind'de uygulanan tüm temizlemeleri devre dışı bırakmak için bir HTML dosyası oluşturun ve ' açık-yok ” HTML programında istenen öğe ile yardımcı sınıf. Bu yardımcı program, belirli bir öğeye uygulanan tüm 'temiz'leri sıfırlar ve varsayılan değeri tanımlar.
Sözdizimi
< eleman sınıf = 'temiz-yok' > ... eleman >
Örnek
Bu örnekte, “ açık-yok ' ile yardımcı program' Uygulanan temizlemeleri sıfırlamak ve sol ve sağ taraflarda yüzmesine izin vermek için ” öğesi:
< vücut >
< div sınıf = 'h-96 mx-10 p-8 bg-sky-500' >
< img kaynak = 'tailwindcss_img.png' sınıf = 'kayan sol p-3 w-28 h-24' her şey = 'resim' />
< img kaynak = 'tailwindcss_img.png' sınıf = 'kayan-sağ p-3' her şey = 'resim' />
< P sınıf = 'temiz-yok' > Tailwind CSS sağlar 'temizlemek' içeriğin bir öğenin etrafına sarılmasını kontrol etmek için yardımcı programlar.
Bu örnek, öğelere uygulanan tüm temizlemelerin nasıl devre dışı bırakılacağını gösterecektir. Uygulanan temizlemeleri belirli bir öğeye sıfırlamak için, 'temiz-yok' yardımcı program kullanılır. P >
div >
vücut >
Burada:
- “ sola kayan ” sınıfı,
öğesini kabın sol tarafında yüzer.
- “ Sağa çık ” sınıfı,
öğesini kabın sağ tarafına kaydırır.
- “ açık-yok ” sınıfı,
öğesine uygulanan herhangi bir temizlemeyi devre dışı bırakır ve öğenin her iki tarafta da yüzmesine izin verir.
Çıktı
Yukarıdaki web sayfasında, içeriğin kabın her iki yanında yüzdüğü gözlemlenebilir. Bu, uygulanan tüm temizlemelerin belirtilen öğeden devre dışı bırakıldığını gösterir.
Çözüm
Tailwind'de uygulanan tüm temizlemeleri devre dışı bırakmak için ' açık-yok ” HTML programında istenen öğe ile yardımcı sınıf. Bu yardımcı program, belirli bir öğeye uygulanan herhangi bir temizlemeyi sıfırlar ve varsayılan değeri belirtir. Doğrulama için web sayfasına gidin ve değişiklikleri görüntüleyin. Bu makale, Tailwind CSS'de uygulanan tüm temizlemeleri devre dışı bırakma örneğini göstermiştir.