【问题标题】：Div not hidding with tailwind classDiv 不隐藏顺风类
【发布时间】：2021-11-14 19:25:22
【问题描述】：

我在尝试用顺风隐藏一些 div 时遇到问题

我有两个 div，但都显示在桌面和移动设备上

第 1 部分：必须在桌面上显示并在移动设备上隐藏。

<div class="hidden md:block" style="margin-bottom":5px></div>

第 2 部分：必须在移动设备上显示并在桌面设备上隐藏：

<div class="hidden lg:block" style="margin-bottom":5px></div>

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

要仅在特定断点应用可见性实用程序，请在现有类名中添加 {screen}: 前缀。例如，将 md:invisible 类添加到元素会在中等屏幕尺寸及以上尺寸应用不可见实用程序。

https://tailwindcss.com/docs/visibility#responsive

1

这在移动设备上隐藏，但在桌面设备上可见。

<div class="invisible md:visible"></div>

2

这在移动设备上可见但在桌面上隐藏。

<div class="visible md:invisible ..."></div>

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.15/tailwind.min.css" rel="stylesheet" />
<div class="invisible md:visible">
  Visible on desktop
</div>


<div class="visible md:invisible">
  Visible on mobile
</div>

您可以使用lg 代替md。

【讨论】：

我查看了这个并且没有工作，看起来它工作，因为谷歌只显示一个添加并让另一个为空。但是两个 div 仍然出现
@SEVENELEVEN 你可以使用旧版本的顺风。运行代码片段并更改浏览器大小，看看它是否有效。