Bu makale, Tailwind CSS'de statik yardımcı programları kullanma yöntemini açıklayacaktır.
Tailwind'de Statik Yardımcı Programlar Nasıl Kullanılır?
Tailwind'deki statik yardımcı programları kullanmak için ' addUtilities() 'tailwind.config.js' dosyasında '' işlevini kullanın ve istenen statik yardımcı programları yapılandırın. Ardından, HTML programında statik yardımcı programları kullanın ve HTML web sayfasını görüntülerken statik yardımcı programların düzgün çalıştığından emin olun.
Aşağıdaki adımları inceleyelim:
1. Adım: 'tailwind.config.js' Dosyasında Statik Yardımcı Programları Yapılandırın
Aç ' tailwind.config.js ” dosyasını açın ve “ eklentiler ' bölüm. Ardından, “ addUtilities() İstenen statik yardımcı programları yapılandırmak için ” işlevi. Örneğin, aşağıdaki statik yardımcı programları yapılandırdık:
const eklentisi = require('tailwindcss/plugin')
modül.ihracat = {
içerik: ['./index.html'],
eklentiler: [
eklenti(işlev({ addUtilities }) {
yardımcı programlar({
'.içerik-otomatik': {
'içerik görünürlüğü': 'otomatik',
},
'.content-gizli': {
'içerik görünürlüğü': 'gizli',
},
'.bg-mercan': {
arka plan: 'mercan'
},
'.skew-5 derece': {
transform: 'skewY(-5deg)',
},
})
})
]
};
Burada:
- “ addUtilities() ” işlevi, yardımcı sınıfları ve bunlara karşılık gelen stilleri içeren bir nesne sağlayarak özel statik yardımcı programları kaydeder.
- “ .içerik-otomatik ” yardımcı program sınıfı, içerik görünürlüğü özelliğini otomatik olarak ayarlar.
- “ .içerik gizli ” yardımcı program sınıfı, içerik görünürlüğü özelliğini gizli olarak ayarlar.
- “ .bg-mercan ” yardımcı sınıf, mercan rengini arka plana ayarlar.
- “ .çarpık-5 derece ” yardımcı program sınıfı, transform özelliğini skewY(-5deg) olarak ayarlar.
Adım 2: HTML Programında Statik Yardımcı Programları Kullanın
Şimdi, HTML programında istenen statik yardımcı programları kullanın:
< div sınıf = 'h-screen bg-mercan' >
< P sınıf = 'içerik-otomatik' >Merhaba< / P >
< P sınıf = 'içerik gizli' >Buraya Hoş Geldiniz< / P >
< P sınıf = 'çarpık-5 derece' >Metni Dönüştür< / P >
< / div >
< / vücut >
3. Adım: Çıktıyı Doğrulayın
Son olarak, statik yardımcı programların düzgün çalıştığından emin olmak için HTML programını çalıştırın:
Yukarıdaki çıktı, statik yardımcı programların tanımlandıklarına göre düzgün çalıştığını gösterir.
Çözüm
Tailwind'deki statik yardımcı programları kullanmak için “ addUtilities() 'tailwind.config.js' dosyasında '' işlevini kullanın ve istenen statik yardımcı programları yapılandırın. “addUtilities()” işlevi ve doğrudan HTML programında uygulanabilen yardımcı program sınıfları ekleyin. Bu makale, Tailwind CSS'de statik yardımcı programları kullanma yöntemini açıklamaktadır.