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-0 | border-width: 0px; |
| border-2 | border-width: 2px; |
| border-4 | border-width: 4px; |
| border-8 | border-width: 8px; |
| border | border-width: 1px; |
| border-x-0 | border-left-width: 0px; border-right-width: 0px; |
| border-x-2 | border-left-width: 2px; border-right-width: 2px; |
| border-x-4 | border-left-width: 4px; border-right-width: 4px; |
| border-x-8 | border-left-width: 8px; border-right-width: 8px; |
| border-x | border-left-width: 1px; border-right-width: 1px; |
| border-y-0 | border-top-width: 0px; border-bottom-width: 0px; |
| border-y-2 | border-top-width: 2px; border-bottom-width: 2px; |
| border-y-4 | border-top-width: 4px; border-bottom-width: 4px; |
| border-y-8 | border-top-width: 8px; border-bottom-width: 8px; |
| border-y | border-top-width: 1px; border-bottom-width: 1px; |
| border-t-0 | border-top-width: 0px; |
| border-t-2 | border-top-width: 2px; |
| border-t-4 | border-top-width: 4px; |
| border-t-8 | border-top-width: 8px; |
| border-t | border-top-width: 1px; |
| border-r-0 | border-right-width: 0px; |
| border-r-2 | border-right-width: 2px; |
| border-r-4 | border-right-width: 4px; |
| border-r-8 | border-right-width: 8px; |
| border-r | border-right-width: 1px; |
| border-b-0 | border-bottom-width: 0px; |
| border-b-2 | border-bottom-width: 2px; |
| border-b-4 | border-bottom-width: 4px; |
| border-b-8 | border-bottom-width: 8px; |
| border-b | border-bottom-width: 1px; |
| border-l-0 | border-left-width: 0px; |
| border-l-2 | border-left-width: 2px; |
| border-l-4 | border-left-width: 4px; |
| border-l-8 | border-left-width: 8px; |
| border-l | border-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.
<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.
<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