區隔樣式

​基本用法

​設定分隔線樣式

使用 divide-{style} 工具控制元素之間的邊框樣式。

<div class="divide-y divide-dashed">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

---

​條件式套用

​滑鼠移入、焦點及其他狀態

Tailwind 讓你可以在不同的狀態下，使用變體修飾符條件式套用工具程式類別。例如，使用 hover:divide-solid 僅在滑鼠移入時套用 divide-solid 工具程式。

<div class="divide-y divide-dashed hover:divide-solid">
  <!-- ... -->
</div>

要取得所有可用狀態修飾符的完整清單，請查看 滑鼠移入、焦點及其他狀態 文件。

​斷點和媒體查詢

你也可以使用變體修飾符針對媒體查詢，例如回應式斷點、暗色模式、偏好減少動作等。例如，使用 md:divide-solid 僅在中型螢幕大小及以上套用 divide-solid 工具程式。

<div class="divide-y divide-dashed md:divide-solid">
  <!-- ... -->
</div>

如需深入了解，請查看 回應式設計、 暗色模式 和 其他媒體查詢修飾符 的文件。