點燈坊

失くすものさえない今が強くなるチャンスよ

使用 divide-y 設定 Row 間橫線

Sam Xiao's Avatar 2020-10-21

實務上常需要在 Row 之間設定橫線方便識別,可在 Container 簡單使用 divide-ydivide-color 達成。

Version

Tailwind CSS 2.1.1

divide-y

divide000

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

divide000

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

Reference

Tailwind CSS, Divide Width
Tailwind CSS, Divide Color