Tailwind 中如何设置元素显示在中屏及以下？

Question

我有一个

hidden md:block

类的 div，其中包含来自 Heroicon 的此元素：

<MenuIcon class="ml-1 mr-2 h-5 w-5 text-gray-500"/>

。

目前，div 元素仅在屏幕尺寸为

md

时显示，但我想在下面的

md

和 处显示，具体该怎么做？

Answer 1

Tailwind断点是移动优先的，所以它们会向上。一开始一切都是可见的。

你只需要隐藏 elem 即可。从一定尺寸及以上：

sm -> md -> lg -> xl -> 2xl

class="lg:hidden"

将隐藏 lg 及以上的元素 - lg、xl、2xl

---

有关该主题的更多信息，请参阅：Tailwind 中的响应式设计

---

PS： div 会自动屏蔽，所以你不需要使用

block

，它是屏蔽的。您只需要将其隐藏在

lg

及以上，就像我在示例中所写的那样;)

但是假设我想要的元素是

hidden

，那么从

md

到

xl

是

block

，然后再次

hidden

它将是：

<div class="hidden md:block 2xl:hidden">Hello</div>

Answer 2

我相信你正在做相反的事情。

基本上=> https://tailwindcss.com/docs/responsive-design

这种方法最让人惊讶的地方就是风格 对于移动设备，您需要使用 a 的无前缀版本 实用程序，而不是 sm: 前缀版本。不要把 sm: 当作意义 “在小屏幕上”，可以将其视为“在小断点处”。

因此，您必须在课堂上执行

class="block lg:hidden"

，才能使其按照您所描述的方式工作:)