Tailwind CSS - 分割线样式

Tailwind CSS - 分隔线样式

Tailwind 的分隔线工具类提供了一种强大而优雅的方式，可以在子元素之间添加边框。你无需手动为每个元素添加边框，只需将一组分隔线工具类应用于父容器即可。

可用的分隔线样式类

这些工具类控制分隔线的 border-style CSS 属性。

类名	CSS 属性
divide-solid	border-style: solid;
divide-dashed	border-style: dashed;
divide-dotted	border-style: dotted;
divide-double	border-style: double;
divide-none	border-style: none;

核心概念

基于父容器的应用：分隔线工具类应用于你希望分隔的元素的父容器。
方向控制：你必须使用 divide-x（用于行中项目之间的垂直线）或 divide-y（用于列中项目之间的水平线）来指定分隔线的方向。
分隔线样式：你可以将 divide-style 与其他工具类（如 divide-width (例如 divide-y-2) 和 divide-color (例如 divide-gray-300)）结合使用，以完整地设置分隔线的样式。
反转顺序：当与 flex-row-reverse 或 flex-col-reverse 结合使用时，请使用 divide-x-reverse 或 divide-y-reverse 工具类将分隔线添加到每个元素的正确一侧。

实用示例

示例 1：垂直导航菜单样式

此示例展示了如何在设置菜单中创建清晰、分隔的链接。我们对父 div 应用 divide-y 和 divide-gray-200，以便在每个链接之间自动放置一条水平线。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Divide Style Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 flex items-center justify-center min-h-screen p-4">

  <div class="w-full max-w-xs bg-white rounded-lg shadow-md">
    <div class="font-bold text-lg p-4 border-b">Settings</div>
    <!-- 带有分隔线工具类的父容器 -->
    <div class="divide-y divide-gray-200">
      <a href="#" class="block p-4 hover:bg-gray-50">Profile</a>
      <a href="#" class="block p-4 hover:bg-gray-50">Notifications</a>
      <a href="#" class="block p-4 hover:bg-gray-50">Billing</a>
      <a href="#" class="block p-4 hover:bg-gray-50">Security</a>
    </div>
  </div>

</body>
</html>

示例 2：响应式和条件分隔线样式

分隔线可以根据状态或屏幕尺寸进行不同的样式设置。在此示例中，我们创建了一个列表，其中 dotted（点状）分隔线在鼠标悬停时变为 solid（实线）并改变颜色，提供了清晰的视觉反馈。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Conditional Divide Style</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen p-4">

  <div class="w-full max-w-md bg-white rounded-lg shadow-xl">
    <div class="p-4 border-b">
      <h3 class="font-semibold text-xl">Project Tasks</h3>
    </div>
    <!-- Group 修饰符允许父状态来样式化子元素 -->
    <div class="group divide-y divide-dotted divide-slate-300 hover:divide-solid hover:divide-blue-400">
      <div class="p-4 flex justify-between items-center">
        <span>Design the new dashboard</span>
        <span class="text-sm text-gray-500">2 days left</span>
      </div>
      <div class="p-4 flex justify-between items-center">
        <span>Implement API endpoints</span>
        <span class="text-sm text-gray-500">4 days left</span>
      </div>
      <div class="p-4 flex justify-between items-center">
        <span>Deploy to staging server</span>
        <span class="text-sm text-gray-500">Due tomorrow</span>
      </div>
    </div>
  </div>

</body>
</html>

可访问性与最佳实践

纯视觉效果：分隔线通过在子元素上添加边框来实现（使用 + * 选择器）。它们纯粹是展示性的，不会为屏幕阅读器添加任何语义值。它们仅用于视觉分组。
与 Flexbox/Grid 结合使用：分隔线工具类与 Flexbox 和 Grid 布局完美配合，因为它们针对的是相邻的兄弟元素。
避免双重边框：请注意不要将 divide-* 工具类与子元素上的 border-* 工具类混合使用，否则可能会在它们交汇处出现双倍粗的边框。
自定义：你无法自定义分隔线样式本身（如 solid、dashed 等），因为它们是固定的 CSS 关键字。但是，你可以在 tailwind.config.js 中自定义 divideWidth 和 divideColor 的尺寸。