Width
Tetapkan lebar elemen
Sintaks
space="w:[value]"Nilai
| Properti | CSS Output | Huraian |
|---|---|---|
w | width: var(--s-{value}) | Lebar |
min-w | min-width: var(--s-{value}) | Lebar minimum |
max-w | max-width: var(--s-{value}) | Lebar maksimum |
Nilai Skala
none, tiny, small, medium, big, giant, vast
Contoh
html
<div space="w:[100%]">Full width</div>
<div space="max-w:[1200px]">Max width container</div>
<div space="min-w:[300px]">Min width</div>Pratonton
Kawal Lebar
space="w:[100%]" - Tetapkan lebar tetap atau peratusan
w:[100%]
w:[75%]
w:[50%]
Lihat Kod
html
<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
<div space="w:[100%] p:small" visual="bg:primary text:white rounded:small">w:[100%]</div>
<div space="w:[75%] p:small" visual="bg:primary text:white rounded:small">w:[75%]</div>
<div space="w:[50%] p:small" visual="bg:primary text:white rounded:small">w:[50%]</div>
</div>Lebar Maksimum
space="max-w:[200px]" - Hadkan lebar maksimum
max-w:[200px]
Lihat Kod
html
<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
<div space="max-w:[200px] p:small" visual="bg:primary text:white rounded:small">max-w:[200px]</div>
</div>Nilai Arbitrari
Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
html
<div space="width:[custom-value]">Custom</div>Nota
TIP
Sokongan Skala Tailwind
Gunakan awalan tw- untuk mengakses skala numerik Tailwind: w:tw-64 (16rem), max-w:tw-96 (24rem)