如何使用Tailwind CSS制作中间带文本的HR水平分割线

不需要拘泥于<hr>元素，用flex布局即可快速实现需求，以下是可直接复用的实现方案：

<div class="flex items-center gap-4">
  <div class="flex-1 h-px bg-gray-300"></div>
  <span class="text-gray-500 text-sm">Continue</span>
  <div class="flex-1 h-px bg-gray-300"></div>
</div>

关键样式说明 #

• flex items-center gap-4：将容器设为弹性布局，内部元素垂直居中，文字和左右线条之间预留16px间距，可调整gap-x-*的数值改变文字两侧的留白大小
• flex-1 h-px bg-gray-300：左右两个线条元素占满剩余宽度，高度设为1px，填充灰色作为分割线颜色，可替换bg-*类修改分割线颜色，调整h-*改变线条粗细
• 中间的<span>为分割线中间的文本内容，可自行修改text-*相关类调整文字大小、颜色、字重等样式

常见样式变体 #

圆角线条分割线 #

<div class="flex items-center gap-6">
  <div class="flex-1 h-0.5 bg-gray-200 rounded-full"></div>
  <span class="text-gray-600 font-medium">Or</span>
  <div class="flex-1 h-0.5 bg-gray-200 rounded-full"></div>
</div>

深色背景适配分割线 #

<div class="flex items-center gap-4 bg-gray-900 p-4">
  <div class="flex-1 h-px bg-gray-700"></div>
  <span class="text-gray-400 text-sm">Continue</span>
  <div class="flex-1 h-px bg-gray-700"></div>
</div>

内容的提问来源于stack exchange，提问作者Guilherme Beserra