Bu makale şunları açıklayacaktır:
- Tailwind Temasında Ekranlar, Renkler ve Boşluk ne işe yarar?
- Tailwind Temasında Ekranlar, Renkler ve Boşluk Nasıl Kullanılır?
- Tailwind Temasında Ekranları, Renkleri ve Aralıkları Nasıl Yapılandırırım?
Tailwind Temasında Ekranlar, Renkler ve Boşluk ne işe yarar?
bu ekranlar tuşu, kullanıcıların Tailwind projesindeki duyarlı kesme noktalarını değiştirmesine izin verir. Kesme noktaları, düzenin ekran genişliğine göre değiştiği noktalardır. Varsayılan olarak, Tailwind beş ekran içerir, yani sm (küçük), md (orta), lg (büyük) ve xl (çok büyük). Ancak kullanıcılar kesme noktalarını “ekranlar” tuşunu kullanarak tanımlayabilir ve ardından HTML programında kullanabilirler.
Renkler tuşu renk paletini değiştirmek için kullanılır. Renkler, tasarımın en önemli özelliklerinden biridir. Tailwind teması, çok çeşitli tonlara sahip varsayılan bir renk paleti sağlar, ancak kullanıcılar bunu kendi renkleriyle özelleştirebilir veya genişletebilir. Kullanıcılar renkleri 'renkler' tuşunu kullanarak tanımlayabilir ve ardından bunları HTML kodunda renkle ilgili herhangi bir yardımcı program sınıfıyla kullanabilir.
bu aralık tuşu, boşluk ve boyutlandırma ölçeğini değiştirmek için kullanılır. Boşluk, öğelerin okunabilirliğini, hizalanmasını ve dengesini etkilediği için tasarımın bir başka önemli yönüdür. Tailwind teması, 4 piksellik (0,25 rem) temel değere dayalı tutarlı bir aralık ölçeği sağlar. Ancak özelleştirilebilir veya özel değerlerle genişletilebilir. Kullanıcılar 'boşluk' tuşunu kullanarak boşluk değerlerini tanımlayabilir ve ardından bunları program dosyasında boşlukla ilgili herhangi bir yardımcı program sınıfıyla kullanabilir.
Tailwind Temasında Ekranlar, Renkler ve Boşluk Nasıl Kullanılır?
Tailwind temasında ekranları, renkleri ve boşlukları kullanmak için bir HTML programı yapın ve varsayılan ekran, renkler ve boşluk özelliklerini gerektiği gibi kullanın. Ardından, HTML programını çalıştırın ve HTML web sayfasını görüntüleyin. Aşağıda belirtilen adımları takip edelim:
1. Adım: HTML Web Sayfası Oluşturun
İlk olarak, bir HTML programı yapın ve varsayılan ekran, renkler ve boşluk özelliklerini kullanın:
= 'metin-3xl m-5 sm:metin-beyaz metin merkezi' >
Linux İpucu!
>
= 'metin-2xl m-5 md:metin-beyaz metin merkezi' >
Bu Eğitime Hoş Geldiniz
>
= 'metin-2xl m-5 lg:metin-beyaz metin merkezi' >
Kuyruk Rüzgarı CSS'si
>
Bu Eğitime Hoş Geldiniz
>
= 'metin-2xl m-5 lg:metin-beyaz metin merkezi' >
Kuyruk Rüzgarı CSS'si
>
= 'metin-2xl m-5 xl:metin-beyaz metin merkezi' >
Temalar
>
>
>
Burada:
- “ -p-10 ' Ve ' m-5 ” boşluk özelliğidir.
- “ sm ”, “ md ”, “ lg ', Ve ' xl ” ekran özellikleridir.
- “ kırmızı-700 ”, “ mavi-600 ”, “ yeşil-500 ”, “ pembe-700 ', Ve ' beyaz ” renk özellikleridir.
2. Adım: HTML Programını Çalıştırın
Ardından, HTML web sayfasını görüntülemek için HTML programını çalıştırın:
Yukarıdaki çıktıda, varsayılan ekranlar, renkler ve aralık özellikleri görülebilir.
Tailwind Temasında Ekranları, Renkleri ve Aralıkları Nasıl Yapılandırırım?
Tailwind temasındaki ekranları, renkleri ve aralığı yapılandırmak için verilen-sağlanan adımlara bakın:
- Aç ' tailwind.config.js ' dosya.
- şuraya git: tema ” bölümüne gidin ve ekranları, renkleri ve boşluk özelliklerini gerektiği gibi özelleştirin.
- HTML programında özelleştirilmiş özellikleri kullanın.
- Doğrulama için HTML web sayfasını görüntüleyin.
1. Adım: Tailwind Yapılandırma Dosyasında Ekranları, Renkleri ve Aralığı Yapılandırın
İçinde ' tema “” bölümünün tailwind.config.js ” dosyası, ekranları, renkleri ve boşluk özelliklerini ihtiyaca göre özelleştirin. Örneğin, bu özellikleri şu şekilde özelleştirdik:
modül .ihracat = {içerik : [ './index.html' ] ,
tema : {
//ekranları özelleştirme
ekranlar : {
sm : '480 piksel' ,
md : '668 piksel' ,
lg : '876 piksel' ,
xl : '1100 piksel' ,
} ,
//renkleri özelleştirme
renkler : {
beyaz : #ffffff ,
siyah : '#000000' ,
mavi : '#08609c' ,
yeşil : '#089c28' ,
kırmızı : '#9c0306' ,
sarı : '#ede60e' ,
pembe : '#ed0e55' ,
} ,
//aralığı özelleştirme
aralık : {
piksel : '1 piksel' ,
'0' : '0' ,
'1' : '0.25rem' ,
'2' : '0.5rem' ,
'3' : '0.75rem' ,
'4' : '1 şey' ,
'5' : '1.25rem' ,
'6' : '1.5rem' ,
'8' : '2rem' ,
'10' : '2.5rem' ,
'12' : '3rem' ,
'16' : '4rem' ,
'yirmi' : '5rem' ,
}
} ,
} ;
Bu kodda:
- “ ekranlar ” özelliği, çeşitli boyutlar için ekran kesme noktalarını tanımlar. Takma adlar (sm, md, lg, xl gibi) ve bunların eşdeğer değerlerini sağlar.
- “ renkler ” özelliği, adlarını ve onaltılık değer çiftlerini kullanarak özel renkleri tanımlar.
- “ aralık ” özelliği, birçok boyut için özel boşluk değerleri belirtir. Belirli aralık değerlerini “uzak” birimlerde temsil etmek için takma adlar (px, 0, 1, 2 vb.) kullanır.
2. Adım: HTML Programında Yapılandırılmış Özellikleri Kullanın
Şimdi, HTML programındaki özelleştirilmiş özellikleri kullanın:
= 'metin-3xl m-5 sm:metin-beyaz metin merkezi' >
Linux İpucu!
>
= 'metin-2xl m-5 md:metin-beyaz metin merkezi' >
Bu Eğitime Hoş Geldiniz
>
= 'metin-2xl m-5 lg:metin-beyaz metin merkezi' >
Kuyruk Rüzgarı CSS'si
>
Bu Eğitime Hoş Geldiniz
>
= 'metin-2xl m-5 lg:metin-beyaz metin merkezi' >
Kuyruk Rüzgarı CSS'si
>
= 'metin-2xl m-5 xl:metin-beyaz metin merkezi' >
Temalar
>
>
>
3. Adım: HTML Web Sayfasını Görüntüleyin
Son olarak, HTML web sayfasını görüntüleyerek çıktıyı doğrulayın:
Yapılandırılan ekranlara, renklere ve aralık özelliklerine göre web sayfasının içeriğinin değiştiği gözlemlenebilir.
Çözüm
bu ekranlar anahtarı, kullanıcıların duyarlı kesme noktalarını özelleştirmesine/değiştirmesine izin verir; renkler tuşu proje için renk paletini özelleştirmek için kullanılır ve aralık tuşu, aralığı ve boyutlandırma ölçeğini özelleştirmek için kullanılır. Ayrıca, kullanıcılar bu anahtarları veya özellikleri ihtiyaçlarına göre özelleştirebilir. Bu makalede, Tailwind temasındaki ekranlar, renkler ve boşluklar açıklanmıştır.