Hay una página de inicio de sesión que está construida con Tailwind CSS v3, todos los estilos son agradables y finos. Pero en la página de inicio de sesión, quiero tener alertas de temporizador que se muestren si ocurre algún error, como correo electrónico no válido, correo electrónico que ya está en uso de esa manera.
Qué se hace: Así que creé un <div id="su-error-container"> en la página de inicio de sesión justo encima del botón Enviar que estará vacío de forma predeterminada, cada vez que ocurra un error, js crea un elemento y lo agrega al div presente con clases Tailwind CSS en él.
Pero el problema es que las clases como padding, margin, text size y todas funcionan bien, pero las clases text-color, bg-color no funcionan. Código:-
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);Elemento copiado de Dev Tools Chrome:
<div class="mb-10 bg-red-500"><span>Sign Up Error: </span>Invalid Email Address</div>Otras clases funcionan, pero clases de color, comente si necesita información adicional.
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: [], };Así que descubrí cuál era el problema. Entonces, comenzando con cómo funciona el viento de cola.
Cuando usamos cualquier clase en Tailwind, no se cargan todas las clases de Tailwind. Tailwind analizó los archivos y solo carga las clases que se han utilizado en los archivos.
En mi escenario, estaba agregando la alerta con clases como bg-red-300 o text-red-500 que no se usaron en todo el proyecto en ninguna parte.
Entonces, esto significa que Tailwind CSS no cargó estas clases en el archivo CSS, por lo tanto, las clases de color no funcionaron.
Creé un div oculto en index.html que contenía un div donde se usaban estas clases y, como este div tenía una clase oculta, no era visible para el usuario y Tailwind al escanear los archivos, agrega estas clases al archivo CSS que se va a servir. , por lo tanto, ahora, cuando se agrega una alerta en la página de registro, ¡funciona perfectamente bien!
Estás mezclando algunas cosas aquí. Primero, con respecto a esta línea:
alertMainDiv.className += "mb-10 bg-red-500"; Sabiendo que creó el elemento justo antes, debe asignar el className usando el operador = , no agregando el operador += .
Entonces, con respecto a esta línea:
alertSpan.class = "font-medium"; Como puede leer en los documentos , debe usar la propiedad className DOM en su lugar (que ya usó una línea arriba):
Nota: La clase es un atributo HTML, mientras que className es una propiedad DOM.
alertMainDiv.className = "mb-10 bg-red-500"; alertSpan.className = "font-medium";