Bu yazı, Tailwind'de temel stili ekleyerek başlıkları stillendirme yöntemini gösterecektir.
Temel Stil Tailwind Kullanılarak Başlıklara Nasıl Stil Verilir?
Tailwind'de başlıkların stilini belirlemek için verilen-sağlanan adımlara göz atın:
- Projenin CSS dosyasını açın.
- CSS dosyasında, temel stili “ kullanarak başlıklara ekleyin. @katman “ direktifi” altında @tailwind tabanı; ” direktifi.
- Bir HTML programı yapın ve içindeki başlık öğelerini kullanın.
- HTML programını çalıştırın ve çıktıyı doğrulayın.
1. Adım: CSS Dosyasındaki Başlıklara temel Stil ekleyin
İlk olarak, “ stil.css ” dosyasını açın ve “ kullanarak içindeki başlıklara temel stili ekleyin. @katman ” direktifi. Örneğin, aşağıdaki başlıklara temel stili ekledik:
@kuyruk rüzgarı temel ;
@katman temel {
h1 {
@uygula metin-6xl ;
}
h2 {
@uygula metin-5xl ;
}
h3 {
@uygula metin-4xl ;
}
h4 {
@uygula metin-3xl ;
}
h5 {
@uygula metin-2xl ;
}
}
@kuyruk rüzgarı bileşenler ;
@kuyruk rüzgarı araçlar ;
Burada:
- “ @katman tabanı { … } ”, yeni bir taban katmanı tanımlar ve başlık bileşenleri için stilleri içerir.
- “ h1 { @metni uygula-6xl; } ”, “ metin-6xl ' yardımcı program sınıfı ' h1 ' elementler.
- Benzer şekilde, ' h2 ”, “ h3 ”, “ h4 ', Ve ' h5 ” elemanların yazı tipi boyutları “ kullanılarak ayarlanmıştır. @uygula ” ve ilgili yardımcı program sınıfları (text-5xl, text-4xl, text-3xl ve text-2xl).
2. Adım: Başlıkları Kullanarak HTML Web Sayfası Oluşturun
Ardından, HTML programını yapın ve içindeki başlık öğelerini kullanın. Burada, aşağıdaki başlık öğelerini kullandık:
< vücut >
< div sınıf = 'h-screen justify-center text-center bg-violet-400' >
< h1 > Başlık 1 < / h1 >
< h2 > Başlık 2 < / h2 >
< h3 > Başlık 3 < / h3 >
< h4 > Başlık 4 < / h4 >
< h5 > Başlık 5 < / h5 >
< / div >
< / vücut >
3. Adım: HTML Programını Çalıştırın
Son olarak, HTML programını çalıştırın ve doğrulama için web sayfasını görüntüleyin:
Yukarıdaki çıktı, başlıkları CSS dosyasındaki stiller gibi görüntüledi.
Çözüm
Tailwind'de başlıkların stilini belirlemek için, CSS dosyasını açın ve ' @katman “ direktifi” altında @tailwind tabanı; ” direktifi. Ardından, bir HTML programı yapın ve içindeki başlık öğelerini kullanın. Son olarak, çıktıyı doğrulamak için HTML web sayfasını görüntüleyin. Bu yazıda, Tailwind'de temel stili ekleyerek başlıklara stil verme yöntemi açıklanmıştır.