Tailwind CSS 的颜色类在附加时不起作用

Question

有一个使用 Tailwind CSS v3 构建的登录页面，所有样式都很好。但是在登录页面上，我希望有计时器警报，如果发生任何错误，例如无效电子邮件、电子邮件已经在使用中，就会显示这种方式。

做了什么： 所以我在登录页面的提交按钮上方创建了一个<div id="su-error-container">，默认情况下该按钮为空，每当发生错误时，js 都会创建一个元素并将其附加到其中包含 Tailwind CSS 类的 div 中。

但问题是，填充、边距、文本大小等类都可以正常工作，但 text-color、bg-color 类不起作用。 代码：-

parentElement = document.querySelector("#su-error-container");
alertMainDiv = document.createElement("div");
alertSpan = document.createElement("span");
alertMainDiv.className = "mb-10 bg-red-500";
alertSpan.className = "font-medium";
titleTextNode = document.createTextNode(title);
messageTextNode = document.createTextNode(message);
alertSpan.appendChild(titleTextNode);
alertMainDiv.appendChild(alertSpan);
alertMainDiv.appendChild(messageTextNode);
parentElement.appendChild(alertMainDiv);

从 Dev Tools Chrome 复制的元素：

<div class="mb-10 bg-red-500"><span>Sign Up Error: </span>Invalid Email Address</div>

其他类也可以，但是颜色类，如果需要任何额外信息，请评论！

tailwind.config.js

    module.exports = {
      content: ["./*.html", "./assets/**/*.js"],
    
      theme: {
        screens: {
          sm: "540px",
          // => @media (min-width: 576px) { ... }
      md: "720px",
      // => @media (min-width: 768px) { ... }

      lg: "960px",
      // => @media (min-width: 992px) { ... }

      xl: "1140px",
      // => @media (min-width: 1200px) { ... }

      "2xl": "1320px",
      // => @media (min-width: 1400px) { ... }
    },
    container: {
      center: true,
      padding: "16px",
    },
    extend: {
      colors: {
        black: "#212b36",
        dark: "#090E34",
        "dark-700": "#090e34b3",
        primary: "#3056D3",
        secondary: "#13C296",
        "body-color": "#637381",
        warning: "#FBBF24",
      },
      boxShadow: {
        input: "0px 7px 20px rgba(0, 0, 0, 0.03)",
        pricing: "0px 39px 23px -27px rgba(0, 0, 0, 0.04)",
        "switch-1": "0px 0px 5px rgba(0, 0, 0, 0.15)",
        testimonial: "0px 60px 120px -20px #EBEFFD",
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Answer 1

所以我弄清楚了问题所在。 所以从顺风的工作原理开始。

当我们在 tailwind 中使用任何类时，并不是所有的 tailwind 类都被加载。 Tailwind 扫描文件并仅加载文件中已使用的类。

在我的场景中，我在警报中附加了 bg-red-300 或 text-red-500 之类的类，它们在整个项目的任何地方都没有使用。

所以这意味着 Tailwind CSS 没有在 CSS 文件中加载这些类，因此颜色类不起作用。

解决方案：

我在 index.html 中创建了一个隐藏的 div，其中包含一个使用这些类的 div，并且由于该 div 具有隐藏的类，因此用户和 Tailwind 在扫描文件时看不到它，将这些类添加到 CSS 文件中待服务，因此现在当在注册页面中附加警报时，它工作得非常好！

Answer 2

你在这里混淆了一些东西。首先，关于这一行：

alertMainDiv.className += "mb-10 bg-red-500";

知道您刚刚创建了元素，您应该使用= 运算符分配 className，而不是附加运算符+=。

那么，关于这一行：

alertSpan.class = "font-medium";

正如您在docs 中看到的，您应该改用className DOM 属性（上面已经使用了一行）：

注意：class 是 HTML Attribute，而 className 是 DOM Property。

正确的分配

alertMainDiv.className = "mb-10 bg-red-500";
alertSpan.className = "font-medium";