Tailwind 中的断点问题

Question

好吧，这很奇怪。我已经阅读了与此相关的多个其他问题，但似乎没有任何办法可以解决它。除了断点外，Tailwind 工作正常。

我脑子里有这个

 <meta name="viewport" content="width=device-width, initial-scale=1.0" />

这是我的 tailwind.config （我什至尝试在此处添加自定义断点，但仍然不起作用）

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./*.{html,js}"],
    theme: {
        extend: {
            colors: {
                "marine-blue": "hsl(213, 96%, 18%)",
                "purplish-blue": "hsl(243, 100%, 62%)",
                "pastel-blue": "hsl(228, 100%, 84%)",
                "light-blue": "hsl(206, 94%, 87%)",
                "strawberry-red": "hsl(354, 84%, 57%)",
                "cool-gray": "hsl(231, 11%, 63%)",
                "light-gray": "hsl(229, 24%, 87%)",
                "magnolia": "hsl(217, 100%, 97%)",
                "alabaster": "hsl(231, 100%, 99%)",
                "white": "hsl(0, 0%, 100%)",
            },
            fontFamily: {
                ubuntu: ["Ubuntu", "sans-serif"],
            },
        },
    },
    plugins: [],
};

这是基本代码，它工作正常

 <div class="container w-full relative z-10">
                <img
                    src="assets/images/bg-sidebar-mobile.svg"
                    alt="sidebar image"
                    class="absolute w-full z-10 max-h-[180px]"
                />
            </div>

现在我可以添加一个隐藏类，这也有效，div 像预期一样消失了

 <div class="container w-full relative z-10 hidden">
                <img
                    src="assets/images/bg-sidebar-mobile.svg"
                    alt="sidebar image"
                    class="absolute w-full z-10 max-h-[180px]"
                />
            </div>

这是它停止工作的地方

 <div class="container w-full relative z-10 sm:hidden">
                <img
                    src="assets/images/bg-sidebar-mobile.svg"
                    alt="sidebar image"
                    class="absolute w-full z-10 max-h-[180px]"
                />
            </div>

无论我如何在 chrome 检查器中调整浏览器/响应窗口的大小，我都可以添加 xs:block sm:hidden 等。断点代码不起作用。由于某种原因，添加任何断点标签（xs、sm、md、lg、xl）都不会被执行。我可以删除断点标签，但它工作得很好。

我关闭并重新打开了 VC Code，重新启动了 tailwind 的 --watch 功能，在 Chrome 和 Firefox 中都尝试了这个，断点不起作用。

Answer 1

我真正理解您的困境，我将用简单的术语解释顺风断点如何工作。

我们有几个断点：

xs

sm

md

lg

xl

等等

示例

<p class="text-md xs:text-lg sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl"> 
  Hello
</p>

在上面的代码块中，我们希望在每个断点命中时缩放

Hello

的大小。另外，请注意，在实用程序类的开头，我们有

text-md

，当我们点击

xs

下面时，它用作默认字体大小。

要在应用程序中使用它并解决当前的错误，您需要指定要在哪个断点处显示 div。

例如，下面的代码块显示图像将被隐藏，直到到达

xl

断点。它不会显示在以下任何内容上

xl

class="hidden xl:block"

解决方案

 <div class="container w-full relative z-10 hidden xl:block">
       <img
          src="assets/images/bg-sidebar-mobile.svg"
          alt="sidebar image"
          class="absolute w-full z-10 max-h-[180px]"
        />
 </div>