Tailwind CSS, özelleştirilebilir ve duyarlı web sayfaları veya tasarımları oluşturmak için kullanılan iyi bilinen bir çerçevedir. Ayrıca, kullanıcıların herhangi bir özel CSS yazmadan öğelerin düzenini ve aralığını kontrol etmelerini sağlar. Dolgu, belirli bir öğenin içeriği ile kenarlığı arasındaki boşluktur. Bazen kullanıcılar, bir öğenin her tarafına aynı miktarda dolgu uygulamak ister. Tailwind, bir öğenin tüm kenarlarına veya üst, sağ, alt veya sol gibi belirli taraflara dolgu uygulamak için yardımcı program sınıfları sağlar.
Bu makale, Tailwind'de bir öğenin tüm kenarlarına dolgu ekleme yöntemini örnekleyecektir.
Tailwind'de Tüm Kenarlara Dolgu Nasıl Eklenir?
Tailwind'de belirli bir öğenin tüm kenarlarına dolgu eklemek için bir HTML yapısı oluşturun. Ardından, ilgili öğeyle “p-
Sözdizimi
< eleman sınıf = 'p-
'
Örnek
Bu örnekte iki tane var ' İkinci Çıktı Tailwind'de bir öğenin tüm kenarlarına dolgu eklemek için, HTML programında istenen öğeyle birlikte “p-
< vücut >
< div sınıf = 'bg-pembe-600 p-8 w-maks' >
Dolgu malzemesi içinde Kuyruk Rüzgarı CSS'si
div >
< br >
< div sınıf = 'bg-teal-600 p-14 w-maks' >
Dolgu malzemesi içinde Kuyruk Rüzgarı CSS'si
div >
vücut >
Burada, ilk
Yukarıdaki çıktıya göre, belirtilen dolgu her iki kapsayıcının her tarafına uygulanmıştır. Çözüm