Div 没有顺风躲藏 class

Question

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

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

Div 1: 必须在桌面上显示并在移动设备上隐藏。

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

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

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

Answer 1

To apply a visibility utility only at a specific breakpoint, add a {screen}: prefix to the existing class name. For example, adding the class md:invisible to an element would apply the invisible utility at medium screen sizes and above.

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 没有顺风躲藏 class

Div not hidding with tailwind class

css

tailwind-css

1

2