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

【问题标题】：class="hidden sm:flex" doesn't work in TailwindCSSclass="hidden sm:flex" 在 TailwindCSS 中不起作用
【发布时间】：2020-07-17 09:28:13
【问题描述】：

我想通过将隐藏的 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

【解决方案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"

我希望这会有所帮助！

【讨论】：

感谢您的帮助，但我希望它在小屏幕中隐藏并在大屏幕中可见
那么你的问题没有明确提出。为此，您需要执行此操作hidden md:flex - 这会将其隐藏在较小的屏幕上并在较大的屏幕上显示。让我知道这是否是您正在寻找的。span>
hidden md:flex md:visible 解决了我的问题 - 谢谢@ben

【解决方案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";

希望这能解决您的问题。

【讨论】：

【解决方案3】：

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

@tailwind screens;

【讨论】：