tarihinde yayınlandı Yorum yapın

Kenarlık Genişliliği – Tailwind CSS

Kenarlıık Genişliği (Tailwind CSS) : Bir öğenin sınırlarını genişliğini denetlemede yardımcı olan araçtır veya koddur.

SınıfÖzellikleri
border-0border-width: 0px;
border-2border-width: 2px;
border-4border-width: 4px;
border-8border-width: 8px;
borderborder-width: 1px;
border-x-0border-left-width: 0px; border-right-width: 0px;
border-x-2border-left-width: 2px; border-right-width: 2px;
border-x-4border-left-width: 4px; border-right-width: 4px;
border-x-8border-left-width: 8px; border-right-width: 8px;
border-xborder-left-width: 1px; border-right-width: 1px;
border-y-0border-top-width: 0px; border-bottom-width: 0px;
border-y-2border-top-width: 2px; border-bottom-width: 2px;
border-y-4border-top-width: 4px; border-bottom-width: 4px;
border-y-8border-top-width: 8px; border-bottom-width: 8px;
border-yborder-top-width: 1px; border-bottom-width: 1px;
border-t-0border-top-width: 0px;
border-t-2border-top-width: 2px;
border-t-4border-top-width: 4px;
border-t-8border-top-width: 8px;
border-tborder-top-width: 1px;
border-r-0border-right-width: 0px;
border-r-2border-right-width: 2px;
border-r-4border-right-width: 4px;
border-r-8border-right-width: 8px;
border-rborder-right-width: 1px;
border-b-0border-bottom-width: 0px;
border-b-2border-bottom-width: 2px;
border-b-4border-bottom-width: 4px;
border-b-8border-bottom-width: 8px;
border-bborder-bottom-width: 1px;
border-l-0border-left-width: 0px;
border-l-2border-left-width: 2px;
border-l-4border-left-width: 4px;
border-l-8border-left-width: 8px;
border-lborder-left-width: 1px;

Temel Kullanım

her açıdan

Kullanılan border.border-0.border-2.border-4, or .border-8 bir öğeye kenarlık belirlemek için kullanılan kod araçları bu şekildedir.

Kenarlık kalınlaklarını tipine göre sıralamar bu şekildedir.
<div class="border border-indigo-600 ..."></div>
<div class="border-2 border-indigo-600 ..."></div>
<div class="border-4 border-indigo-600 ..."></div>
<div class="border-8 border-indigo-600 ..."></div>

Tek taraflı kalınlık oluşturmak için kodları

Kullanılan kodları şu şekildedir border-{side}.border-{side}-0.border-{side}-2.border-{side}-4, or .border-{side}-8 bir öğede sadece bir tarafta kalınlık oluşturmak için oluşturan kod ve görünüm biçimleri.

Tek taraflı oluşturulan kalınlık örnekleri.
<div class="border-t-4 border-indigo-500 ..."></div>
<div class="border-r-4 border-indigo-500 ..."></div>
<div class="border-b-4 border-indigo-500 ..."></div>
<div class="border-l-4 border-indigo-500 ..."></div>

Yatay ve dikey olarak oluşturulan kenarlıklar.

Bir öğenin iki tarafında aynı anda kenarlık genişliği ayarlamak için  border-{x|y}-{width} bu kodu kullanın.

<div class="border-x-4 border-indigo-500 ..."></div>
<div class="border-y-4 border-indigo-500 ..."></div>

Kenar Elemanları Arasında

Ayrıca, bölme-{x/y}-{genişlik} ve bölme-{renk} yardımcı programlarını kullanarak alt öğeler arasına kenarlıklar da ekleyebilirsiniz.

<div class="divide-y divide-slate-200 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Genişlik renk bölümleri için başka bir kaynak için (ingilizce) Kenarlık Renk

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir