如何用Tailwind CSS实现移动端隐藏内容、桌面端显示？

你当前写的hidden lg:block是移动优先的逻辑：默认所有屏幕隐藏，只有屏幕宽度≥lg（默认1024px）时才显示。如果出现“桌面隐藏、移动端显示”的反向效果，大概率是你对“桌面端”的尺寸定义和Tailwind默认的lg断点不符——比如你的桌面显示器宽度小于1024px（属于md区间），这时候还是会应用hidden类。

正确写法根据你的需求调整： #

• 如果你要仅在小屏移动端（<640px）隐藏，用：

  <nav class="hidden sm:block">abc</nav>
  

• 如果你要在平板及以下（<768px）隐藏，用：

  <nav class="hidden md:block">abc</nav>
  

• 如果你坚持用lg断点，确认你的桌面屏幕宽度≥1024px，否则属于移动端区间，会保持隐藏。

关于visible/invisible无效的原因： #

这两个类控制的是CSS的visibility属性，元素会继续占据页面空间，只是肉眼不可见；而你需要的是完全隐藏（不占空间），必须用hidden搭配block/flex这类控制display的类，所以visible/invisible不适用你的场景。

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