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

Question

我通过执行以下操作在所有边缘上设置了边框：

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

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

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

/**

• 1. 防止内边距和边框影响元素宽度。
• 我们曾经在 html 元素中设置它并继承自
• 其他所有内容的父元素。这引起了问题
• 在 Shadow-dom 增强的元素中，例如内容
• 由一个 div 包裹，且 box-sizing 设置为content-box。
• https://github.com/mozdevs/cssremedy/issues/4
• 2. 允许仅通过添加边框宽度来向元素添加边框。
• 默认情况下，浏览器指定元素不应该有的方式
• none边框是通过在用户代理中将其边框样式设置为
• 样式表。
• 只需设置即可轻松为元素添加边框border-width
• 属性，我们将所有元素的默认边框样式更改为solid, 和
• 使用 border-width 来隐藏它们。这样我们的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>

然而，这太长了。有什么办法可以让它变短吗？

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

如何将其作为 JIT 中的参数？

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

我想做的只是将其显示在任意一侧，因此上面的链接试图将其显示在底部。（换句话说，无论是在顶部、底部还是其他任何地方，这只是一个例子。）

Answer 1

您可以根据以下文档将 2px 的边框宽度仅应用于顶部边缘

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

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

查看顺风游乐场的解决方案

编辑：如果您使用的是JIT模式，请查看shingo.nakanishi 的回答top border-top-widthapply1px

Answer 2

您可以通过使用下面的类来实现这一点

border-solid border-0 border-t border-blue-900

Answer 3

感谢这个答案。我使用 JIT，我可以为 1px 进行以下操作：

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

Answer 4

TL;博士; 对于无预检：border-[0] border-t border-solid border-black

对于那些没有preflightTailwind 的用户（这是他们的 css 重置规则），默认浏览器border-width是1px，因此在设置时border-solid将显示所有边框。

1px然后可以添加顶部边框，border-[0] border-t border-solid border-black其中border-[0]将首先重置border-width，并且border-t是border-width-top: 1px;