有没有更短的方法只在一侧写边框？
Is there a shorter way to write a border on only one side?
我通过执行以下操作在所有边缘上设置了边界：
这实际上是一个错误，但在提问时我相信我可以用下面的代码画一条线到 TOP。 （实际上，所有边上都画了线。）
<div class="border border-blue-900 border-t-1">foo</div>
我想只在一侧显示，所以我做了一些研究。
我注意到当我在 tailwindcss 中使用 border 时，
输出文件中输出了以下内容。
/**
-
- Prevent padding and border from affecting element width.
- We used to set this in the html element and inherit from
- the parent element for everything else. This caused issues
- in shadow-dom-enhanced elements like where the content
- is wrapped by a div with box-sizing set to
content-box.
- https://github.com/mozdevs/cssremedy/issues/4
-
- Allow adding a border to an element by just adding a border-width.
- By default, the way the browser specifies that an element should have no
- border is by setting it's border-style to
none in the user-agent
- stylesheet.
- In order to easily add borders to elements by just setting the
border-width
- property, we change the default border-style for all elements to
solid, and
- use border-width to hide them instead. This way our
border utilities only
- need to set the
border-width property instead of the entire border
- shorthand, making our border utilities much more straightforward to compose.
- https://github.com/tailwindcss/tailwindcss/pull/116
*/
我认为这可能是原因。
通过编写以下内容，我已经成功地将它仅应用于顶部边缘。
<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）。
我想做的只是显示在任何一侧，所以上面的link试图在底部显示它。 （换句话说，它是在顶部、底部还是其他任何地方都没有关系，只是一个例子。）
根据documentation如下
，您可以仅将2px的border-width应用于上边缘
<div class="border-t-2 border-blue-900">foo</div>
错误是在 tailwind-CSS 中没有名为 border-t-1 的实用程序 class。还应用 border 实用程序 class 添加 border-width: 1px; 的 CSS 样式，为所有边添加边框宽度。
查看解决方案
编辑：检查 top apply border-top-width of 1px if you are using JIT模式
谢谢。
我使用 JIT，我可以为 1px 制作以下内容：
<div class="border-t-[1px] border-blue-900">foo</div>
您可以使用以下方法实现此目的 class
border-solid border-0 border-t border-blue-900
我不知道为什么，但有时我需要在提供的答案之外添加 border-b-0 border-r-0 border-l-0（这对我有用，但并非总是如此）。如果有人知道为什么，请告诉我。
我通过执行以下操作在所有边缘上设置了边界：
这实际上是一个错误，但在提问时我相信我可以用下面的代码画一条线到 TOP。 （实际上，所有边上都画了线。）
<div class="border border-blue-900 border-t-1">foo</div>
我想只在一侧显示，所以我做了一些研究。
我注意到当我在 tailwindcss 中使用 border 时，
输出文件中输出了以下内容。
/**
- Prevent padding and border from affecting element width.
- We used to set this in the html element and inherit from
- the parent element for everything else. This caused issues
- in shadow-dom-enhanced elements like where the content
- is wrapped by a div with box-sizing set to
content-box.- https://github.com/mozdevs/cssremedy/issues/4
- Allow adding a border to an element by just adding a border-width.
- By default, the way the browser specifies that an element should have no
- border is by setting it's border-style to
nonein the user-agent- stylesheet.
- In order to easily add borders to elements by just setting the
border-width- property, we change the default border-style for all elements to
solid, and- use border-width to hide them instead. This way our
borderutilities only- need to set the
border-widthproperty instead of the entireborder- shorthand, making our border utilities much more straightforward to compose.
- https://github.com/tailwindcss/tailwindcss/pull/116 */
我认为这可能是原因。 通过编写以下内容，我已经成功地将它仅应用于顶部边缘。
<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）。
我想做的只是显示在任何一侧，所以上面的link试图在底部显示它。 （换句话说，它是在顶部、底部还是其他任何地方都没有关系，只是一个例子。）
根据documentation如下
，您可以仅将2px的border-width应用于上边缘<div class="border-t-2 border-blue-900">foo</div>
错误是在 tailwind-CSS 中没有名为 border-t-1 的实用程序 class。还应用 border 实用程序 class 添加 border-width: 1px; 的 CSS 样式，为所有边添加边框宽度。
编辑：检查border-top-width of 1px if you are using JIT模式
谢谢
<div class="border-t-[1px] border-blue-900">foo</div>
您可以使用以下方法实现此目的 class
border-solid border-0 border-t border-blue-900
我不知道为什么，但有时我需要在提供的答案之外添加 border-b-0 border-r-0 border-l-0（这对我有用，但并非总是如此）。如果有人知道为什么，请告诉我。