如何使用 Tailwind CSS 做 HR 分隔符？

Posted 2023-03-05

【中文标题】如何使用 Tailwind CSS 做 HR 分隔符？

【英文标题】：Creating a horizontal rule (HR) divider that contains text with Tailwind CSS

【发布时间】：2022-01-09 04:22:00

【问题描述】：

我想使用 Tailwind CSS 创建一个 <hr> 分隔符，但我在文档中找不到类似 https://i.stack.imgur.com/4kDRd.png 的内容。有人能帮我吗？我是 Tailwind CSS 的初学者。

【参考方案1】：

你必须使用css在tailwind中使用分隔符。另一方面你也可以使用边框属性

【讨论】：

你能用边框做一个简单的例子吗？

【参考方案2】：

试试这个...

<div class="relative">
    <div class="w-full border-t border-gray-300"></div>
</div>

【参考方案3】：

您可以使用此 html 语法来创建您想要的内容：

<div class="relative flex py-5 items-center">
    <div class="flex-grow border-t border-gray-400"></div>
    <span class="flex-shrink mx-4 text-gray-400">Content</span>
    <div class="flex-grow border-t border-gray-400"></div>
</div>

【讨论】：

这很好，请帮助文森特：D

这看起来不错。

如果不起作用，只需将 w-full 添加到父 div ！为我工作！

【参考方案4】：

这里是一个例子，你可以使用::before来控制样式，你可以使用额外的::after来添加居中图标

我把样式放到css块里，不然html里会有点乱

https://play.tailwindcss.com/o6hRnQrqVy