class="hidden sm:flex" 在 TailwindCSS 中不起作用

Question

我想通过向特定项目添加隐藏的 sm:flex 来使我的导航栏具有响应能力。这意味着它默认会隐藏，但仅在小屏幕及以上屏幕上显示。我做了一些调试，发现隐藏覆盖了所有内容，甚至是响应式变体。其他显示属性适用于响应式变体。这是我的代码：

className="hidden sm:flex sm:w-2/5 w-11/12 mt-4 sm:mt-0 items-center shadow-md"

Answer 1

Tailwind 由移动优先设计驱动，就像 bootstrap 和其他一些 CSS 框架一样。参考： https: //tailwindcss.com/docs/responsive-design/#mobile-first

这意味着没有变体的类将首先应用于较小的屏幕，然后您可以为更大的屏幕添加变体。

所以，你想要实现的目标应该是这样的：

className="flex md:hidden w-2/5 md:w-11/12 mt-0 md:mt-4 items-center shadow-md"

我希望这有帮助！