The most common mistake when using Tailwind CSS (and how to fix it)
Published 16 days ago by Pouya Saadeghi

The most common mistake when using Tailwind CSS (and how to fix it)

While working on daisyUI, I see a lot of people making this mistake when using Tailwind CSS.

As a maintainer of daisyUI, I help people on GitHub issues and GitHub discussions every day. I see a lot of people making this mistake when using Tailwind CSS. It’s so simple to avoid but I find it so common among developers.

The mistake

Here’s how we simply use Tailwind CSS class names in HTML:

<div class="bg-red-500"></div>
<div class="bg-green-500"></div>
<div class="bg-blue-500"></div>

However it would be cool if we do some totally necessary engineering and make it more dynamic. So we do something like this:

<div class="bg-{{ color }}-500"></div>

You might even want to do the same thing with daisyUI class names:

<div class="btn btn-{{ type }}"></div>
instead of
<div class="btn-primary"></div>

It’s cool, right?
It even works in dev environment.

Everything is fine…
😠 until we build our app for production and you realize the color is not working anymore

Why it doesn’t work?

Tailwind CSS scans your HTML files and looks for class names. Then it generates a CSS file based on the class names it finds. It’s that simple. Because the string bg-red-500 does not exist in bg-{{ color }}-500, it simply won’t generate the CSS for it.

Read more about using dynamic class names with Tailwind CSS.

But it was working in dev environment!

Yes, it was working because you probably first had bg-red-500 in your file, you saved the file and .bg-red-500 class name got added to your CSS. Then you changed it to bg-{{ color }}-500 and saved the file again. bg-red-500 is not in your HTML anymore, but it’s still in your CSS file. So it works in dev environment, but not in production.

But some class names work and some don’t!

Probably because you used those class names the correct way (as a string like bg-red-500) in another file.


How to fix it?

Simply do not use dynamic class names like bg-{{ color }}-500. Make sure the whole class name as a string exists in your file.

let color = 'bg-red-500'
<div class="{{ color }}"></div>

If you really have to do that, You have 3 ways:

Solution 1: Add the class names somewhere in the file

Map the required class names somewhere in your file. It can be an object, a comment or anything.

Solution 2: A safelist file

List all the required class names in a safelist file and add it to your tailwind.config.js file as content

module.exports = {
  content: ["./path/safelist.txt"],
  // ...

./path/safelist.txt file can be simply like this:


Solution 3: Safelist config

Safelist all the required class names in your tailwind.config.js file.

module.exports = {
  content: ["./pages/**/*.{html,js}", "./components/**/*.{html,js}"],
  // ...
  safelist: ["bg-red-500", "bg-green-500", "bg-blue-500"],
  // ...

You can also use regex patterns in safelist:

module.exports = {
  content: ["./pages/**/*.{html,js}", "./components/**/*.{html,js}"],
  // ...
  safelist: [
      pattern: /bg-(red|green|blue)-(400|500|600)/,
  // ...

Read more about Tailwind CSS safelist.

Don't miss new posts!

Subscribe to daisyUI newsletter to get updates on new posts.

You will only receive an email when a new post is published. No spam. No ads.