有没有更短的方法只在一侧写边框？

Question

通过执行以下操作，我得到了所有边缘的边框：

这实际上是一个错误，但是在提出问题时，我相信我可以使用以下代码仅在 TOP 上画一条线。 （实际上，所有的边缘都画了线。）

<div class="border border-blue-900 border-t-1">foo</div>

我只想在一侧显示它，所以我做了一些研究。 我注意到当我在tailwindcss 中使用border 时， 以下是输出文件中的输出。

/**

• 1. 防止填充和边框影响元素宽度。
• 我们曾经在 html 元素中设置这个并继承自
• 其他所有元素的父元素。这导致了问题
• 在 shadow-dom-enhanced 元素中，例如内容所在的位置
• 被一个 div 包裹，box-sizing 设置为content-box。
• https://github.com/mozdevs/cssremedy/issues/4
• 1. 只需添加边框宽度即可为元素添加边框。
• 默认情况下，浏览器指定元素的方式应该没有
• 边框是通过在用户代理中将其边框样式设置为none
• 样式表。
• 为了给元素添加边框，只需设置border-width
• 属性，我们将所有元素的默认边框样式更改为solid，并且
• 改为使用边框宽度来隐藏它们。这样我们的border 实用程序只有
• 需要设置border-width属性而不是整个border
• 简写，使我们的边境实用程序更易于编写。
• https://github.com/tailwindcss/tailwindcss/pull/116 */

此输出的原始内容来自 https://github.com/tailwindlabs/tailwindcss/blob/723e8d4377eb25b66a6224f767937fa02762eb52/src/plugins/css/preflight.css#L71

我认为这可能是原因。 通过编写以下内容，我已成功地将其仅应用于顶部边缘。

<div class="border border-blue-900 border-t-1 border-l-0 border-r-0 border-b-0">foo</div>

但是，这太长了。有什么办法可以缩短吗？

注意：我也在考虑以下替代方案。

How do I take it as a parameter in JIT?

这样我也可以调整宽度（不是边框的宽度，是给display: block的）。

我想要做的只是在任何一侧显示它，所以上面的链接试图在底部显示它。 （换句话说，它是在顶部、底部还是其他任何地方都没有关系。这只是一个示例。）

Answer 1

您可以根据documentation 将 2px 的边框宽度仅应用于顶部边缘，如下所示

<div class="border-t-2 border-blue-900">foo</div>

所犯的错误是tailwind-CSS 中没有名为border-t-1 的实用程序类。还应用border 实用程序类添加border-width: 1px; 的CSS 样式，为所有边添加边框宽度。

在tailwind playground查看解决方案

编辑：如果您使用的是JIT 模式，请查看shingo.nakanishi's answer 顶部应用1px 的border-top-width

Answer 2

谢谢to this answer。 我使用 JIT，我可以为 1px 制作以下内容：

<div class="border-t-[1px] border-blue-900">foo</div>