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

For me, the issue was because of the "textColor" property that I added to the tailwind.config.js. Removing that as it wasn't required has fixed the problem.

Before:

module.exports = {
 content: ["./views/**/*.ejs"],
 textColor: [{white: #fff, black: #000}],
 theme: {
  extend: {
    colors: {}
  }
},
variants: {},
plugins: [
  require("tailwindcss"),
]};

After:

module.exports = {
 content: ["./views/**/*.ejs"],
 theme: {
  extend: {
    colors: {}
  }
},
variants: {},
plugins: [
  require("tailwindcss"),
]};

I hope someone finds this helpful.

Answer 2

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

When we use any classes in tailwind, not all the classes of tailwind are 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!

Answer 3

As Sohel Shekh said the problem is that Tailwind scan HTML and load only present classes

Yes, you can create hidden div and add necessary classes there to force load, but I solve this issue by changing of tailwind.config.js

In my project I use different alerts: warning, failure and success. For this purpose I use different colors

Finally I've added such config

module.exports = {
  //
  safelist: [
    'bg-amber-700',
    'bg-emerald-700',
    'bg-red-700',
  ],
  //
}

After that I can dynamically add classes with JS

It is also possible to use Regexp such way

module.exports = {
  //
  safelist: [
    {
      pattern: /bg-(amber|emerald|red)-700/,
    }
  ],
  //
}

Please read more about safelist

Hope this helps you

Answer 4

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