顺风中的响应断点出现问题

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；sm"；从640px到768px；md"；从768px到1024px；lg"；在1024px以上；默认"；直到768px，然后什么都没有。我不明白为什么它似乎没有遵循文档中的指导方针。此处为Codepen示例。

Answer 1

tailwind中的隐藏类更改display属性，其中visible更改visibility属性。为了让代码正常工作，您需要使用诸如flex之类的显示属性。更多信息可以在这里找到显示顺风CSS文档

此外，要将默认值显示为640px，您需要将第一个div更改为隐藏在小断点之后，而不是中等断点之后，更改为类sm：hidden。这会将显示设置为隐藏在640像素或更高。

点击此处查看操场

更新代码：

<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>

Answer 2

您需要使用类block而不是hidden。你也可以在这里查看，我会尽力解决你的问题。