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由移动优先设计驱动，就像引导程序和其他一些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;