實務上常需要在 Row 之間設定橫線方便識別,可在 Container 簡單使用 divide-y
與 divide-color
達成。
Version
Tailwind CSS 2.1.1
divide-y
Row 之間有隔線。
<template>
<div class="divide-y">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</template>
divide-y
:在 container 加上divide-y
,則 row 之間會有隔線顯示
divide-color
Row 之間隔線顏色變深。
<template>
<div class="divide-y divide-gray-500">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</template>
divide-gray-500
:可使用divide-color
改變 border 顏色
Conclusion
divide-y
只會設定 row 之間的橫線,而不會產生 container 的 border