时间戳

首页 > 解决方案 > class="hidden sm:flex" 在 TailwindCSS 中不起作用

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

问题描述

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

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

标签： tailwind-css

解决方案

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"

我希望这有帮助！

推荐阅读