Tailwind CSS移动端边框问题：电脑端如何隐藏顶部边框

问题根源是Tailwind的响应式类是叠加生效的——当屏幕尺寸达到md断点时，sm:border-t的样式不会自动失效，所以会和md:border-l同时显示，导致电脑端出现两个边框。

只需要在className中添加md:border-t-0，就能在md及以上尺寸的设备上取消顶部边框：

<div className="w-full md:w-1/4 flex justify-end md:justify-center items-center pt-2 mt-2 sm:border-t md:border-l md:border-t-0">
    <div></div>
</div>

各样式作用说明： #

• sm:border-t：在sm及以上尺寸的设备（移动端）显示顶部边框
• md:border-l：在md及以上尺寸的设备（电脑端）显示左侧边框
• md:border-t-0：在md及以上尺寸的设备中移除顶部边框，覆盖sm:border-t的样式

内容的提问来源于stack exchange，提问作者Alex Aung