Tailwind, renkler, boşluklar, yazı tipi boyutları vb. gibi çeşitli özellikler için önceden tanımlanmış bir dizi değer sunan bir CSS çerçevesidir. Ancak, bazen kullanıcılar, özel bir değer gibi varsayılan yapılandırmada yer almayan bir değer kullanmak isteyebilir renk veya belirli bir kenar boşluğu. Bu durumda keyfi değerler kullanabilirler.

Bu makale, Tailwind CSS'de rasgele değerleri kullanma yöntemini açıklayacaktır.

Tailwind'de Keyfi Değerlerden Nasıl Yararlanılır?

İsteğe bağlı değerler, Tailwind yapılandırma dosyasında tanımlanmadan doğrudan HTML sınıfı özniteliğine yazılabilen özel değerlerdir. Önlerine [24px], [2.5rem] vb. gibi bir köşeli parantez gösterimi eklenir. Tailwind'de rasgele değerleri kullanmak için, bir köşeli parantez gösterimi kullanın ve dinamik olarak yardımcı sınıflar oluşturmak için herhangi bir özel değer belirtin.

Daha iyi anlamak için aşağıda listelenen adımlara göz atın:

Adım 1: HTML Programında Keyfi Değerler Kullanın

Bir HTML programı yapın ve istenen sınıfları oluşturmak için herhangi bir özel değerle köşeli parantez gösterimini kullanın. Örneğin, biz kullandık “bg-[#e9e516]”, “w-[600px]”, “h-[400px]”, “p-[13px]”, ve diğer sınıflar:

Burada:

• “bg-[#e9e516]” class,
  öğesinin arka plan rengini şu şekilde ayarlar: “#e9e516” (sarı).
• “w-[600 piksel]” class,
  öğesinin genişliğini 600 piksel olarak ayarlar.
• “h-[400px]” class, 400 piksellik yüksekliği
  öğesine uygular.
• “p-[13 piksel]” class,
  öğesinin dolgusunu 13 piksele ayarlar.
• “m-[19 piksel]” class,
  öğesinin kenar boşluğunu 19 piksel olarak ayarlar.

• “metin-[30 piksel]” class,

  öğesinin yazı tipi boyutunu 30 piksel olarak ayarlar.

• 'metin-[#7405ab]' class,

  öğesinin metin rengini mor (#7405ab) olarak ayarladı.

• 'takip-[0.5rem]' class, harf aralığını

  öğesine 0,5 rem olarak uygular.

2. Adım: Çıktıyı Doğrulayın

İsteğe bağlı değerlerin düzgün çalıştığından emin olmak için HTML web sayfasını görüntüleyin:

Yukarıdaki çıktı, isteğe bağlı değerlerin tanımlandığı gibi düzgün çalıştığını gösterir.

Çözüm

Tailwind'deki rasgele değerleri kullanmak için dinamik olarak sınıflar oluşturmak üzere HTML programında herhangi bir özel değerle köşeli parantez gösterimi kullanın. Kullanıcılar, yazı tipi boyutu, renk, genişlik, yükseklik, kenar boşluğu, dolgu vb. gibi sayısal veya renk değeri kabul eden herhangi bir özellik için değerler kullanabilir. Bu makale, Tailwind CSS'de rasgele değerleri kullanma yöntemini açıklamaktadır.