Цветовые классы Tailwind CSS не работают при добавлении ⇐ CSS

[Anonymous]

Существует страница для входа в систему, которая построена с Tailwind CSS V3, все стили для красивых и хороших. Но на странице входа я хочу иметь оповещения о таймере, которые будут отображаться, если возникнет какие -либо ошибки, например, недействительную электронную почту, электронная почта уже используется так. Поэтому я создал на странице входа в систему чуть выше кнопки отправки, которая по умолчанию будет пусты, всякий раз, когда возникает ошибка, JS создает элемент и добавляет его к Div присутствует с классами CSS Tailwind. .
code:-< /p>
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);
< /code>
Элемент, скопированный из Dev Tools Chrome: < /p>
Sign Up Error: Invalid Email Address
< /code>
Другие классы работают, но классы цвета, комментарий, если необходима дополнительная информация! > 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: [],
};


Подробнее здесь: https://stackoverflow.com/questions/709 ... n-appended