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

Question

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

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

但问题是，诸如填充、边距、文本大小之类的类都可以正常工作，但文本颜色、背景颜色类则不起作用。代码：-

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);

从 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文件中，因此现在当在注册页面中附加警报时，它工作得很好！