Tailwind CSS如何更简洁地实现元素仅单侧显示边框的效果？

你出现四边都有边框的核心原因是多写了全局border类，该类会默认给元素四条边全部设置1px的边框宽度，仅border-t-1只能覆盖顶部边框宽度，其余三边宽度仍为1px，因此会显示全边框。

简洁实现方案 #

Tailwind v3默认开启JIT模式，且基础预设已将所有元素的border-style默认设为solid，无需额外声明，直接指定单侧边框宽度+颜色即可实现单侧边边框效果：

<!-- 仅顶部1px蓝色边框 -->
<div class="border-t-1 border-blue-900">foo</div>

其余单侧边框写法同理：

• 仅右侧2px红色边框：<div class="border-r-2 border-red-500">foo</div>
• 仅底部3px绿色边框：<div class="border-b-3 border-green-600">foo</div>
• 仅左侧4px黄色边框：<div class="border-l-4 border-yellow-400">foo</div>

如果需要自定义边框样式（比如虚线、点状），可以使用任意值语法一步配置：

<!-- 顶部2px虚线蓝色边框 -->
<div class="border-t-[2px_dashed_#1e3a8a]">foo</div>

内容的提问来源于stack exchange，提问作者shingo.nakanishi