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

顺风是由移动优先设计驱动的，就像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"

我希望这能帮到你!

Answer 2

我在rails应用程序中遇到了同样的错误。问题是我导入了两次顺风基础样式。检查下面的代码。

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "tailwindcss/screens";

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind screens;

要修复此问题，请确保只导入一次，如下所示：

 @import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "tailwindcss/screens";

希望这能解决你的问题。

Answer 3

可能为时已晚，但对于寻找答案的人来说，解决方案是删除

@tailwind screens;