Color classes of Tailwind CSS not working when appended

Question

There is a login page that is built with Tailwind CSS v3, all the styles for nice and fine. But on the login page, I want to have timer alerts that will display if any error occurs like invalid email, email already in use like that way.

What is done: So I created a <div id="su-error-container"> in the login page just above the submit button which will be empty by default, whenever an error occurs, js creates an element and appends it to the div present with Tailwind CSS classes in it.

But the problem is, classes like padding, margin, text size and all work fine, but text-color, bg-color classes do not work. Code:-

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

Element copied from Dev Tools Chrome:

<div class="mb-10 bg-red-500"><span>Sign Up Error: </span>Invalid Email Address</div>

Other classes work, but colour classes, comment if any extra info is needed!

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

You're mixing up some things here. First, regarding this line:

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

Knowing that you created the element just before, you should assign the className using the = operator, not appending operator += .

Then, regarding this line:

alertSpan.class = "font-medium";

As you can read in the docs , you should use the className DOM property instead (which you used already one line above):

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

Correct assignments

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

Answer 2

So I figgered out what was the problem. So starting with how tailwind works.

When we use any classes in tailwind, not all the classes of tailwind is loaded. Tailwind scanned the files and only loads the classes which have been used in the files.

In my scenario, I was appending the alert with classes like bg-red-300 or text-red-500 which were not used in the whole project anywhere.

So this means Tailwind CSS didn't load this classes in the CSS file hence the color classes didn't worked.

Solution:

I created a hidden div in index.html which contained a div where these classes were used and as this div having class hidden it was not visible to user and Tailwind when scanning the files, adds this classes to the CSS file which is to be served, hence now when alert is appended in the Sign Up page, it works perfectly fine!