tailwind css doesn't apply custom background color

Question

module.exports = {
  purge: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./layout/**/*.{js,ts,jsx,tsx}",
    "./const/**/*.{js,ts,jsx,tsx}",
    "./fonts/**/*.{js,ts,jsx,tsx,ttf}",
    "./utils/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: false,
  theme: {
    extend: {
      colors: {
        "brand-green": "#4DF69B",
        "brand-amber": "#FF8656",
        "brand-red": "#FF5656",
        "brand-gray": "#7E7E7E",
      },
      width: {
        content: "fit-content",
      },
      top: {
        20: "5rem",
      },
      fontFamily: {
        DINAlternate: ["DINAlternate", "sans-serif"],
      },
    },
  },
  variants: {
    extend: {
      borderWidth: ["hover"],
      textColor: ["group-focus"],
    },
  },
  plugins: [],
};

My config.

I changed my next.config.js to to next.config.ts then it told me that it should have .js format I rewrite it and as I think after I tried to move every file to .ts format my tailwind broke. It works with margins/paddins but not with bg though it works with text-red-200

If I inspect elements I can see bg-brand-red classes but it just doesn't apply them. It worked well but after I refactor code it broke but once I reset everything to prev commit I still get this problem where background colors doesn't work.

It is weird since it worked one time and in 5mins it got broken even when I rollbacked to last commit on github it still be broken

How can I know what is the problem?

Rostyk · Accepted Answer · 2021-08-10 15:00:51Z

19

In my global css file where I import:

@tailwind base;
@tailwind components;
@tailwind utilities;

I moved this piece of code below body{...} and everything works now

body {
    font-family: "DIN Alternate", sans-serif;
    font-size: 16px;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

To the first thing you should check if the same error occured is how you import tailwind css

I moved body to the bottom since fonts didn't work and it WORKED. Weird problem. I think tailwind just needed some refresh in styles UPD:

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    font-family: "DIN Alternate", sans-serif;
    font-size: 16px;
}

edited Aug 10, 2021 at 15:00

answered Aug 10, 2021 at 14:40

Rostyk

1,2213 gold badges19 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Toast Over a year ago

I have no idea why this works, but it worked for me! Thanks so much!

Juan Pablo Over a year ago

This worked for me. It really makes no sense why that works...

Michal Miky Jankovský · Accepted Answer · 2023-11-26 15:27:53Z

6

"PurgeCSS" may be the problem

(you haven't provided usage in the code)

when classes are created dynamically (interpolated), optimizer will simply not export them

force optimizer to include them always

with exact value:

// tailwind.config.js
module.exports = {
  // ...
  safelist: [
    'brand-red', // Add more classes as needed
    // Patterns are also supported
    'brand-*', // Safelists all brand color utilities
  ],
  // ...
}

or with regex pattern:

// tailwind.config.js
module.exports = {
  // ...
  safelist: [
    {
      pattern: /brand-(green|amber|red|grey)-[0-9]{3}/,
    },
  ],
  // ...
}

answered Nov 26, 2023 at 15:27

Michal Miky Jankovský

4,5232 gold badges40 silver badges41 bronze badges

1 Comment

mr-woodapple Over a year ago

Many thanks, that was the problem on my end. Would have never thought about something like that.

chris burd · Accepted Answer · 2021-08-10 14:45:57Z

5

you are importing and declaring in the wrong order - tailwind has some kind of weird problem in compilation about scss ordering - so instead if body first it should come after components and before utilities.

@import 'tailwindcss/base';
@import 'tailwindcss/components';
body {
    font-family: "DIN Alternate", sans-serif;
    font-size: 16px;
}
@import 'tailwindcss/utilities';

answered Aug 10, 2021 at 14:45

chris burd

8584 silver badges9 bronze badges

2 Comments

Rostyk Over a year ago

yea, I have just put the body where it was and moved tailwind imports to the top and it worked fine. It was a weird problem. I returned to where I had, but there is no problem.

chris burd Over a year ago

I did the same thing your doing when I first used it - its okay I guess, when one gets into anything complex imho one still might be better off just using scss or css.

Al Mamun Khan · Accepted Answer · 2023-07-17 14:09:00Z

2

In my case bg-green not working, but when i use bg-green-500 it now fixed.

answered Jul 17, 2023 at 14:09

Al Mamun Khan

81711 silver badges9 bronze badges

1 Comment

Santhosh Over a year ago

in my case adding the custom colors to extend section of tailwind config worked instead of outer block

mustaccio · Accepted Answer · 2022-05-04 21:02:01Z

1

Here is what you can do:

Change tailwing.config.js

content: [
    "./resources/**/*.blade.php", 
    "./resources/**/*.js",
    "./resources/**/*.vue",
]

to this

content: [
    "./resources/**/*.blade.php",
    "./resources/**/**/**/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
],

and finally run the following command

npm run dev

edited May 4, 2022 at 21:02

mustaccio

19.1k16 gold badges51 silver badges60 bronze badges

answered May 2, 2022 at 19:52

Erdal Bey

113 bronze badges

1 Comment

jackik Over a year ago

That should not make a difference. /**/ is used to match paths to any depth, hence the first should match anything the second line matches anyway.

Joshua Dance · Accepted Answer · 2024-11-13 05:21:56Z

1

I had to add safelist to my tailwind.config.ts

safelist: [
  {
    pattern:
    /(bg|text|border)-(purple|pink|orange|yellow|green|black|gray|neutral|red|blue|white)/,
  },
],

edited Nov 13, 2024 at 5:21

Joshua Dance

10.7k4 gold badges80 silver badges85 bronze badges

answered Oct 16, 2024 at 17:04

Caden Levett

1011 silver badge2 bronze badges

Comments

Roshan Singh · Accepted Answer · 2022-08-30 19:02:01Z

0

Any change inside the tailwind.config.js requires the dev server to be restarted. Restarting the server helped me.

edited Aug 30, 2022 at 19:02

answered Aug 30, 2022 at 19:01

Roshan Singh

111 bronze badge

Comments

AsemAlsaiyadi · Accepted Answer · 2023-06-19 17:04:04Z

0

If you install tailwind css well you need extra configurations to apply new styles in runtime

I suppose you put your project files in "dist" folder so if you use npm to install tailwind add this line to package.json in "scripts" section

...
"dev": "tailwindcss -i ./src/input.css -o ./dist/style.css --watch"
...

after that run this command to be able to see changes in runtime on browser

npm run dev

edited Jun 19, 2023 at 17:04

answered Jun 19, 2023 at 17:03

AsemAlsaiyadi

11 bronze badge

Comments

Leon Qiu · Accepted Answer · 2025-11-12 02:29:57Z

In my case, the problem is caused by wrong order of script in the HTML file.

Wrong order: bg-brand doesn't work.

  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: {
            sans: ["Inter", "ui-sans-serif", "system-ui", "sans-serif"]
          },
          colors: {
            brand: {
              DEFAULT: "#1a237e",
              light: "#3949ab"
            },
            accent: "#ffd54f"
          }
        }
      }
    };
  </script>
  <script src="https://cdn.tailwindcss.com"></script>

Correct order: bg-brand works now.

  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: {
            sans: ["Inter", "ui-sans-serif", "system-ui", "sans-serif"]
          },
          colors: {
            brand: {
              DEFAULT: "#1a237e",
              light: "#3949ab"
            },
            accent: "#ffd54f"
          }
        }
      }
    };
  </script>

Collectives™ on Stack Overflow

tailwind css doesn't apply custom background color

9 Answers 9

2 Comments

"PurgeCSS" may be the problem

force optimizer to include them always

1 Comment

2 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

2 Comments

"PurgeCSS" may be the problem

force optimizer to include them always

1 Comment

2 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related