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?

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