Tailwind CSS 边框简介
在 Tailwind CSS 中，我们可以使用 “border-*” 相关的类名来定义元素的边框，包括边框粗细、边框颜色、边框样式。
语法：
border-{粗细}
border-{颜色}-{色阶}
border-{样式}说明：
“border-{粗细}” 用于定义边框粗细，常用类名如下表所示。
| 类名 | 说明 |
|---|---|
| border-0 | 边框宽度为 0px（去除边框） |
| border | 边框宽度为 1px |
| border-2 | 边框宽度为 2px |
| border-4 | 边框宽度为 4px |
| border-8 | 边框宽度为 8px |
“border-{颜色}-{色阶}” 用于定义边框颜色，其中：
- “颜色” 是颜色的英文名，比如 red（红）、blue（蓝）、green（绿）、gray（灰）等。
- “色阶” 取值范围通常是 50~950。数字越小，颜色越浅；数字越大，颜色越深。一般来说，500 是最标准的基础色。
“border-{样式}” 用于定义边框样式，常用类名如下表所示。
| 类名 | 说明 |
|---|---|
| border-solid（默认） | 实线（默认值，通常不需要专门写） |
| border-dashed | 虚线 |
| border-dotted | 点线 |
Tailwind CSS 边框示例
接下来，我们通过几个简单的例子来讲解一下如何使用 Tailwind CSS 来如何定义元素的边框。
示例 1：边框粗细与颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body>
<div class="w-40 h-16 bg-red-200 border border-red-500">
</div>
<div class="w-40 h-16 bg-blue-200 border-4 border-blue-500 mt-6">
</div>
</body>
</html>页面效果如下图所示。
分析：
对于第 1 个 div 来说，我们使用 “border border-red-500” 定义了 1px 宽度、颜色为中等红色的边框。
对于第 2 个 div 来说，我们使用 “border-4 border-blue-500” 定义了 4px 宽度、颜色为中等蓝色的边框。
示例 2：边框样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<div class="w-40 h-16 bg-red-100 border-2 border-red-500 border-dashed"></div>
<div class="w-40 h-16 bg-green-100 border-2 border-green-500 border-dotted mt-6"></div>
</body>
</html>页面效果如下图所示。
分析：
对于第 1 个 div 来说，我们使用 “border-dashed” 将其边框定义成虚线。而对于第 2 个 div 来说，我们使用 “border-dotted” 将其边框定义成点线。
Tailwind CSS 单独边框
在 Tailwind CSS 中，如果想要为某一条边框单独定义样式，我们只需要使用类似对应的方向前缀即可。
语法：
border-t-*
border-b-*
border-r-*
border-l-*说明：
与 “Tailwind 内边距” 一样，边框也支持方向前缀，比如：
border-t-2：表示只有顶部（top）有 2px 边框。border-b-4：表示只有底部（bottom）有 4px 边框。border-l-2：表示只有左侧（left）有 2px 边框。border-r-4：表示只有右侧（right）有 4px 边框。
示例 3：定义单独边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-8">
<div class="w-80 h-40 border-8 border-t-red-500 border-r-green-500 border-b-blue-500 border-l-yellow-400">
</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们使用方向前缀实现了 4 条边框不同颜色的效果。首先使用 border-8 给元素设置了整体 8px 的边框粗细。然后使用：
border-t-red-500：将顶部（top）边框设置为红色。border-r-green-500：将右侧（right）边框设置为绿色。border-b-blue-500：将底部（bottom）边框设置为蓝色。border-l-yellow-400：将左侧（left）边框设置为黄色。
提示: Tailwind CSS 会按照在 HTML 中书写类名的顺序（或者内部的优先级）来覆盖样式。我们也可以用同样逻辑来设置不同边框的粗细，比如：border-t-4 border-b-2，这样就能实现上下边框粗细不一样的效果。
Tailwind CSS 不会改变布局的边框
在传统的 CSS 开发中，如果我们想要给一个元素动态添加边框，比如当鼠标悬停时加上边框。由于边框本身会占据像素空间，往往会导致元素的尺寸发生变化，进而引起整个页面的布局发生 “抖动”。
为了解决这个痛点，Tailwind CSS 提供了一个极其强大的类名：ring（光环）。
语法：
ring-{粗细}
ring-{颜色}-{色阶}说明：
ring 的用法和 border 几乎一模一样的，比如：
ring-2：表示宽度为 2px 的光环。ring-blue-500：表示颜色为中等蓝色的光环。
ring 本质上是使用了 CSS 的 box-shadow（盒阴影）来模拟出边框的效果。因为阴影是不占据空间的，因此无论我们把 ring 设置得多粗，都不会对周围的布局产生任何影响。
示例 4：ring 光环
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-8">
<div class="w-32 h-16 border-4 border-red-400">
border 边框
</div>
<div class="w-32 h-16 ring-4 ring-green-400 mt-4">
ring 光环
</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，这两个 div 的宽高都是相同的，都是 “w-32 h-16”。从表面视觉上看，红色的 border-4 和绿色的 ring-4 长得一模一样，好像都是 4px 的边框。但它们在底层有着本质的区别：
- border：是真实的物理边框，它会占用空间。
- ring：是投影出来的 “虚假边框”，它漂浮在元素外面，不会占用空间。
示例 5：带间距的光环（ring-offset）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-8">
<button class="bg-green-500 text-white px-4 py-2 ring-4 ring-green-300 ring-offset-2">
提交按钮
</button>
</body>
</html>页面效果如下图所示。
分析：
在实际的 UI 设计中，为了让 ring 光环看起来更有层次感（“苹果风”），我们通常会在光环和元素之间留出一段白色的缝隙。这时就可以配合 “ring-offset-*” 类名来使用。
其底层原理是：ring-offset 其实是利用纯白色的阴影来模拟缝隙的。默认是白色，你也可以用 ring-offset-gray-900 来配合深色背景。这种方式比传统的 border 配合 margin 要灵活优雅得多。
提示: 在实际开发中（尤其是制作按钮的点击状态、输入框的输入状态时），强烈推荐小伙伴们优先使用 ring 来代替 border，这样可以避免元素移位和抖动。
Tailwind CSS 自动处理列表的 “分割线”
在实际开发中，我们经常需要制作文章列表或者菜单列表，并且希望在每两个列表项之间加上一条边框作为分割线。如果手动给每一个子元素加上 border-b，不但写起来麻烦，还要绞尽脑汁去处理最后一个元素（去掉它的底边框），非常让人头疼。
Tailwind CSS 提供了一个极其优雅的解决方案：divide（分割线）。我们只需要把它加在 “父元素” 上，它就会自动在子元素之间分配完美的分割线，并且绝不会在最外层产生多余的冗余边框。
语法：
divide-x-{粗细}
divide-y-{粗细}
divide-{颜色}-{色阶}说明：
粗细值和边框类似，如果不写具体数字（如直接写 divide-y），则默认表示 1px 粗细的线。
divide-y：表示在垂直方向上的子元素之间添加水平的分割线。divide-gray-300：表示将这条分割线的颜色设置为浅灰色。
示例 6：使用 divide 处理列表分割线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-8">
<div class="flex flex-col divide-y divide-gray-300 border border-gray-300 rounded-lg max-w-sm">
<div class="p-4 text-gray-700 hover:bg-gray-50">第 1 篇文章：Tailwind 起步</div>
<div class="p-4 text-gray-700 hover:bg-gray-50">第 2 篇文章：Tailwind 盒子</div>
<div class="p-4 text-gray-700 hover:bg-gray-50">第 3 篇文章：Tailwind 文本</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们并没有给任何一个子元素（即那 3 个展示文章名的 div）单独写边框相关的类名。
我们仅仅为它们共同的父元素上添加了 divide-y 和 divide-gray-300。然后 Tailwind CSS 就会非常聪明地识别出这里有 3 个子元素，并且只在 “第 1 篇和第 2 篇” 以及 “第 2 篇和第 3 篇” 之间画上一条浅灰色的线。
常见问题
1. 为什么 Tailwind CSS设置内边距过大，不会把盒子 “撑爆” 呢？
很多初学的小伙伴会有这样一个疑问：在传统 CSS 中，给一个宽 100px 的盒子加上 20px 的 padding 或很粗的 border，盒子的实际宽度会被撑大。为什么在 Tailwind CSS 中，盒子依然是 100px 呢？
这是因为 Tailwind CSS 内置了基础样式重置，它默认会把所有元素的 box-sizing 都设置成了 border-box。
