顺风响应断点的问题

Question

我在使用 tailwindcss 处理以下简单的 html 代码时遇到问题：

<div class="md:hidden">
  default
</div>
<div class="hidden sm:visible md:hidden">
  sm
</div>
<div class="hidden md:visible lg:hidden">
  md
</div>
<div class="hidden lg:visible">
  lg
</div>

而不是在 640px 以下显示“默认”，然后从 640px 到 768px 显示“sm”，然后从 768px 到 1024px 显示“md”，然后在 1024px 以上显示“lg”，它似乎显示“默认”直到 768px，然后什么都没有。 我不明白为什么它似乎不遵循文档中的指南。 Codepen 示例在这里。

Answer 1

您需要使用 class block而不是hidden 。 您也可以在这里查看，我尝试解决您的问题。

Answer 2

tailwind 中隐藏的 class 更改显示属性，其中可见更改可见性属性。 为了使代码正常工作，您需要使用显示属性，例如 flex。 可以在此处找到更多信息Display Tailwind CSS Docs

另外要显示默认为 640px，您需要将第一个 div 更改为隐藏在小断点而不是中断点之后，更改为 class sm:hidden。 这会将显示设置为在 640px 及更高处隐藏。

在这里看游乐场

更新代码：

<div class="flex sm:hidden">default</div>
<div class="hidden sm:flex md:hidden">sm</div>
<div class="hidden md:flex lg:hidden">md</div>
<div class="hidden lg:flex">lg</div>