Tailwind中visible的相反类是什么？移动端元素显隐及宽度问题

关于visible的相反类 #

Tailwind里visible的直接相反类是hidden，但你当前的表格宽度问题和这个无关，核心是用错了显示类。

表格没占满全屏的原因 #

你给表格加了sm:block，这个类会把表格的display从默认的table改成block，彻底破坏了表格的原生布局规则，导致w-full无法正常生效，自然没法占满父容器宽度。

正确写法 #

把sm:block换成sm:table，代码如下：

<div>
    <table className="hidden sm:table w-full">
        <!-- 表格内容 -->
    </table>
</div>

table类会让表格恢复原生的display: table布局，搭配w-full就能在sm及以上屏幕占满全屏，和你期望的效果一致。

为什么大家推荐block？ #

这是混淆了通用元素的显示逻辑——对于div、p这类普通块级元素，hidden的相反类确实是block，但表格是特殊元素，必须用table类来恢复它的原生布局模式，直接用block会导致样式异常，这算是Tailwind使用中容易踩的一个小坑。

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