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

Question

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

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

但问题是，类 padding, margin, text size 等都可以正常工作，但是 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

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

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

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

那么，关于这一行：

alertSpan.class = "font-medium";

正如您在 docs 中看到的那样，您应该使用 className DOM 属性代替（您已经在上面的一行中使用过）：

Note: The class is an HTML Attribute, while the className is a DOM Property.

正确分配

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

Answer 2

所以我弄清楚了问题出在哪里。所以从 tailwind 的工作原理开始。

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

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

所以这意味着 Tailwind CSS 没有在 CSS 文件中加载这个 classes，因此颜色 classes 没有用。

解决方案：

我在 index.html 中创建了一个隐藏的 div，其中包含一个 div，其中使用了这些 classes，因为这个 div 具有 class hidden 它在扫描文件时对用户和 Tailwind 不可见，将此 classes 添加到要提供的 CSS 文件中，因此现在在注册页面中附加警报时，它工作得很好！

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

Color classes of Tailwind CSS not working when appended

html

javascript

css

tailwind-css

tailwind-in-js

正确分配

解决方案：

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

Color classes of Tailwind CSS not working when appended

html

javascript

css

tailwind-css

tailwind-in-js

正确分配

解决方案：

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