如何在 TailwindCSS 中使元素在移动设备尺寸中不可见，但在笔记本电脑尺寸中可见

Question

在 tailwind css 中，我们可以说lg:hidden隐藏 lg 尺寸屏幕中的元素。

在下面的示例中，我们没有指定屏幕尺寸，因此01对任何屏幕都完全隐藏。

<div class="flex ...">
  <div class="hidden ...">01</div>
  <div>02</div>
  <div>03</div>
</div>

我想实现只显示lg尺寸元素但隐藏移动尺寸。然而，tailwind css断点是基于min width所以如果我们指定sm:hidden，例如，从768px开始的最小宽度都被隐藏。

有什么办法可以只显示特定屏幕尺寸的元素，但在 Tailwind CSS 中隐藏在该屏幕尺寸以下？

Answer 1

这是你想要的吗？

<div class="flex ...">
  <div class="hidden lg:block...">01</div>
  <div>02</div>
  <div>03</div>
</div>

Answer 2

用于仅在大屏幕尺寸及以上尺寸上lg:visible应用该实用程序。visible

<div class="flex ...">
  <div class="invisible lg:visible">01</div>
  <div>02</div>
  <div>03</div>
</div>

另请参阅此处

'invisible' 类不会在 Ui 上显示某个部分，而是渲染到 dom 中，因此最好不要使用它，因为它可能会在隐藏某个部分时留下间隙。最好使用“隐藏”类 (17认同)
“隐藏”的唯一缺点是没有“未隐藏”的等效项，因此对于像我这样以前不熟悉使用 Flex、内联、块等在不同断点处显示其他隐藏组件的约定的开发人员来说，它不是无法立即清楚隐藏元素是如何显示的。另外，假设隐藏不会对查看某些断点的爬虫产生 SEO 影响吗？在某些情况下，最好使用 in/visible，但总的来说，我认为隐藏可以更好地避免 DOM 污染。 (3认同)

Answer 3

使用隐藏类作为默认属性，然后使用 md:flex 因为它将隐藏 md 以下断点的 div 并在 md 以上的所有断点上显示它

<div class="flex ...">
<div class="hidden md:flex">01</div>
<div>02</div>
<div>03</div>
</div>

Answer 4

在这个用例中，我试图有条件地向一组单词添加一个break语句。

我使用了以下代码：

className="hidden lg:inline"

Answer 5

顺风有一个更简单的方法。使用max-{breakpoint}:{class}将元素设置为隐藏其下的断点

前任：

<div class="max-sm:hidden">Hello</div>

这将使上述元素保持隐藏状态，直到视口增加超过 640px 的宽度尺寸。