隐藏的sm：flex；不能在Tailwincss中工作 [英] class="hidden sm:flex" doesn't work in TailwindCSS

问题描述

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

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

推荐答案

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"

我希望这会有帮助！

这篇关于隐藏的sm：flex；不能在Tailwincss中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！