'tailwind css doesn't apply custom background color

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?

tailwind-css

Solution 1:^[1]

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

Solution 2:^[2]

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

Solution 3:^[3]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	chris burd
Solution 3	mustaccio

'tailwind css doesn't apply custom background color

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]