Bu gönderi, Tailwind CSS'de 'temel stiller' eklemenin tüm olası yönlerini göstermektedir.
Tailwind'de 'temel' Stiller Nasıl Eklenir?
'Tailwind CSS', tüm HTML içeriğine veya belirli bir öğeye 'temel' stilleri eklemek için aşağıdaki üç yöntemle birlikte gelir:
- Tailwind'de temel stiller eklemek için 'CSS'yi kullanın.
- Tailwind'de temel stiller eklemek için 'Eklenti'yi kullanın.
Bunları tek tek inceleyelim.
Önkoşullar
Pratik uygulamaya geçmeden önce, 'temel stilleri' eklemek için kullanılan 'Linuxhint' adlı yeni oluşturulan projeye bir göz atın:
Proje Dosya Yapısı
Şimdi “index.html” dosyasına gidin ve HTML koduna bakın:
< html >< KAFA >
< bağlantı href = '/dist/output.css' rel = 'stil sayfası' >
< / KAFA >
< vücut >
< h2 sınıf = 'altı çizili metin-orta yazı tipi-kalın metin-pembe-600' > Linuxhint'e hoş geldiniz! < / h2 >< br >
< h3 sınıf = 'metin merkezi yazı tipi-kalın metin–turuncu-600' > Öğretici: Tailwind'de temel stiller ekleme. < / h3 >< br >
< / vücut >
Yukarıdaki kod satırlarında:
Çıktı
Yukarıdaki kodun çıktısı burada gösterilmektedir:
Şimdi, temel stilleri ekleyerek yukarıdaki HTML kodunu özelleştirmek için tartışılan yöntemi kullanın. Tailwind 'CSS' yöntemiyle başlayalım.
Yöntem 1: Tailwind'de 'temel stiller' eklemek için CSS kullanın
Belirli bir HTML öğesine temel stil eklemenin en basit ve kolay yöntemi, bunları projenin ana CSS dosyasına eklemektir. Verilen adımları takip ederek bu görevi uygulamalı olarak gerçekleştirelim.
Adım 1: CSS Dosyasını Açın
İlk olarak, ana CSS dosyasını açın, yani, “ stil.css yerleşik arka rüzgar 'taban', 'bileşenler' ve 'yardımcı programlar' katmanlarını içeren:
2. Adım: CSS'yi ekleyin
Ardından, '
' ve '' HTML öğeleri için 'temel' stili, ' kullanarak sınıfları uygulayarak ekleyin. @uygula ” yönergesi yardımıyla “base” katmanında yer alan “ @katman ” anahtar kelime. “@layer” anahtar sözcükleri, tanımlanan sınıfları belirtilen “temel” katmana ekler: @katman tabanı {
h2 {
@apply text-3xl;
}
h3 {
@text-xl'i uygula;
}
}
h2 {
@apply text-3xl;
}
h3 {
@text-xl'i uygula;
}
}
Yukarıdaki kod satırlarında “ Yazı Boyutu '
' ve '' öğelerine sırasıyla belirtilen boyuta büyütmek için ' sınıfı uygulanır:
Dosyayı kaydedin (Ctrl + S).
3. Adım: Çıktı
Şimdi, kodu canlı sunucuda çalıştırın ve çıktıyı aşağıdaki gibi görün:
Burada çıktı, Tailwind 'Font Size' sınıfının, taban katmanında belirtilen öğeye başarıyla uygulandığını gösterir.
Not : Diğer tüm Tailwind CSS sınıfları için aynı yaklaşım kullanılır.
Yöntem 2: Tailwind'de 'temel stiller' Eklemek için Eklentiyi kullanın
'Temel' stiller eklemek için başka bir yararlı yöntem, ' Eklenti ” ve “ ekleBase() ' işlev. Bu işlev, '' içinde yeni sınıfların kaydedilmesine yardımcı olur. temel ” katman yönergesi. Bu işlev, Tailwind 'tailwind.config.js' dosyasında kullanılır. Uygulamalı yapalım.
Adım 1: 'addBase()' İşlevini tanımlayın
İlk olarak, “ tailwind.config.js ” yapılandırma dosyasını açın ve eklentiden temel stilleri ekleyin ve “addBase()” işlevini çağırın:
Dosya 'yı kaydet.
Adım 2: Çıktı
Son olarak, verilen HTML kodunu çalıştırın ve çıktıyı görün:
Görüldüğü gibi “addBase()” fonksiyonunda JavaScript nesnesi olarak tanımlanan Tailwind “Font Size” sınıfı belirtilen HTML elemanlarına uygulanmaktadır.
Çözüm
Tailwind Temel Stilleri, “ kullanılarak kolayca eklenebilir. CSS ” ana CSS dosyasındaki sınıflar ve “ Eklenti ' ile ' ekleBase() Yapılandırma dosyasında ” işlevi. 'CSS' yöntemi, yalnızca 'temel' katmandaki temel stilleri tanımladığı ve bunları otomatik olarak belirtilen öğeye uyguladığı için en basit yöntem olarak kabul edilir. Öte yandan, “eklenti” bölümü “ tailwind.config.js ” dosyası, temel stilleri JavaScript nesneleri olarak tanımlamak için “addBase()” işlevini gerektirir. Bu gönderi, Tailwind CSS'de temel stiller eklemek için tüm olası yönleri gösterdi.