小编Soh*_*ekh的帖子

有一个使用 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 …