Tailwind CSS - 边框宽度

Tailwind CSS - 边框宽度

Tailwind 的边框宽度工具类允许你控制元素边框的粗细。你可以为所有侧面应用统一的宽度，或针对单个侧面进行精确控制。

理解边框渲染

重要提示： 边框要可见，必须定义其宽度、样式和颜色。缺少其中任何一项都将导致边框不可见。

• 宽度： border-2、border-t-4 等。
• 样式： border-solid、border-dashed 等。
• 颜色： border-blue-500、border-slate-200 等。

边框宽度类

以下是最常用边框宽度工具类的部分列表。将 * 替换为主题尺寸（0、2、4、8）中的数字，或留空表示 1px。

类模式	目标侧面
border-*	所有四个侧面
border-x-*	左侧和右侧
border-y-*	顶部和底部
border-t-*	仅顶部
border-b-*	仅底部
border-l-*	仅左侧
border-r-*	仅右侧
border-s-*	起始侧（遵循文本方向，通常是左侧）
border-e-*	结束侧（遵循文本方向，通常是右侧）

示例：构建 UI 卡片

此示例展示了不同的边框宽度如何在组件内定义结构。细边框（border）勾勒出卡片的轮廓，而标题上较粗的底部边框（border-b-4）则创建了强烈的视觉分隔。

<div class="max-w-sm mx-auto my-8 bg-white dark:bg-slate-800 rounded-lg shadow-lg overflow-hidden border border-slate-200 dark:border-slate-700">
  <div class="p-4 border-b-4 border-blue-500">
    <h3 class="text-xl font-bold text-slate-800 dark:text-white">新功能发布！</h3>
  </div>
  <div class="p-4">
    <p class="text-slate-600 dark:text-slate-300">
      我们刚刚推出了一个新仪表盘，其中包含增强的分析功能。立即查看以获取更深入的数据洞察。
    </p>
  </div>
</div>

实际应用：分隔线

你可以在一个空的 <div> 元素上使用边框工具类来创建自定义的水平或垂直分隔线。这比使用 <hr> 元素更灵活，因为你可以完全控制颜色、宽度和外边距。

<div class="p-8 space-y-4">
  <p>这是内容的第一部分。</p>

  <!-- 简单、细的分隔线 -->
  <div class="border-b border-gray-200 dark:border-slate-700"></div>

  <p>这是内容的第二部分，由一条细线分隔。</p>

  <!-- 较粗、有样式的分隔线 -->
  <div class="border-b-4 border-dotted border-gray-300 dark:border-slate-600 my-8"></div>

  <p>这是内容的第三部分，由一条装饰性的点线分隔。</p>
</div>

自定义边框宽度

你可以通过在 tailwind.config.js 文件中自定义 borderWidth 键，轻松地为项目添加自己的边框宽度值。这对于遵循需要非默认值（如 3px 或 6px）的特定设计系统非常有用。

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      borderWidth: {
        '3': '3px',
        '6': '6px',
      }
    }
  },
  plugins: [],
}

添加此配置并重新编译 CSS 后，你就可以使用 border-3 或 border-b-6 等新类了。