提问人：Tom Robshaw 提问时间：10/25/2023 最后编辑：Tom Robshaw 更新时间：10/26/2023 访问量：81
Tailwind CSS 顶部和底部边框不起作用
Tailwind CSS top and bottom border not working
问：
我试图只在顶部和底部放置边框（而不是向右或向左）。
据我所知，没有冲突的css标签
如果我使用以下内容，它什么都不显示：
className=“border-y-2 border-gray-3 h-24 ml-4 mb-0 w-full”
如果我使用它，它会在所有侧面显示一个边框......
className=“边框实心边框-y-2 边框灰色-3 h-24 ml-4 mb-0 w-full”
我是否在顺风文档中遗漏了什么？https://tailwindcss.com/docs/border-width#customizing-your-theme
答：
0赞
LSE
10/25/2023
#1
最常见的错误是忘记添加 .
在其中，它适用于所有元素以及默认 .@tailwind baseborder-style: solidborder-color
此外，不是顺风的默认颜色。也许你的意思是？border-gray-3border-gray-300
最后，在版本 3 中引入，您确定您没有使用版本 1 或 2 吗？border-y
评论
1赞
Tom Robshaw
10/30/2023
你是对的，这是@tailwind基地。谢谢！
0赞
Arr
10/25/2023
#2
用于顶部和底部。您也可以使用任意值。
使用代码段的示例：border-t-2border-b-2border-t-[3px]
className="border-solid border-t-2 border-b-2 border-gray-3 h-24 ml-4 mb-0 w-full"
0赞
Mohammad
10/25/2023
#3
第一类名称 miss 边框样式
它不会出现，因为 border 属性需要三个值
- 边框宽度
- 边框样式
- 边框颜色
我们用CSS编写它border: 1px solid black;
颜色 gray-3 不是 Tailwind 中的默认颜色
检查： https://tailwindcss.com/docs/customizing-colors#default-color-palette
如何在 Tailwind 中编写它的示例：
<script src="https://cdn.tailwindcss.com"></script>
<div class="border-solid border-y-2 border-gray-300 h-24 ml-4 mb-0 mt-4 w-full">
hello world
</div>
1赞
Rashmi Yadav
10/26/2023
#4
只需稍作修改：
className="border-t border-b border-gray-300 h-24 ml-4 mb-0 w-full"这里 在此修改后的 className 中：
- border-t 在元素的顶部添加边框。
- border-b 在元素的底部添加边框。
- border-gray-300 指定边框的颜色。
这将仅将边框应用于元素的顶部和底部，而左边和右边的边框较少。 希望这会有所帮助！
评论
0赞
Tom Robshaw
10/30/2023
嗨，拉什米，谢谢你，试过了，但仍然没有运气。“border-gray-3”是我在custom.scss文件中声明的颜色，如下所示： $primary： #d23600;$secondary： #150604;$success：#39a14c;$white：#ffffff;$black-1：#1b1a1a;$green-1：#39a14c;$red-1：#e30612;$gray-1：#c4c1c0;$gray-2：#e8e7e7;$gray-3：#c4c4c4;$gray-4：#717070;
0赞
Rashmi Yadav
10/30/2023
嗨，汤姆，请检查顺风配置，确保您已添加@tailwind底座;在您的 style.scss 文件中。然后重新启动服务器并检查。如果它仍然不起作用，LMK！
上一个：在编辑时添加和删除单元格边框
下一个：R 热图周围的奇怪边框
评论