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: [],
};

Culinary

Can you post your tailwind.config.js file? – Benz

Does my answer work for you? – Lighten

tailwind.config.js file posted in question – Culinary

You can hands-on in it, visit this site and try some random invalid email like hola.helo. and random password and click submit. – Culinary

Answer 1

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!

Culinary

this was the right answer – Whydah

I came across this issue with all the w-[] classes. But the problem is that my project can use arbitrary values. How do I account for that? – Lohrman

@Lohrman it is possible to use regexp and safelist config. Please see my answer – Kalikow

I hate with a passion that the workaround here is to create a hidden div. There has to be a way to force TW to preload specific colors. Edit: ahh, I see mechnicov's answer about safelist! – Embarkation

Answer 2

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

Kalikow

Answer 3

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

Lighten

I corrected the assignment problem, classes like mb-10, font-medium worked but bg-red-500 or text-green-500 (Color Classes) didn't worked at all. Is this something problem because appending element through js and tailwind not able to apply the color classes, clueless about the problem. – Culinary

And for alertSpan it was a typo, updated that in the code, but the color class still not working – Culinary

when using += space between classes are not added. hence it wont work. – Tortoni