title: tailwind css doesn't apply custom background color
body: <pre><code>module.exports = {
    purge: [
      &quot;./pages/**/*.{js,ts,jsx,tsx}&quot;,
      &quot;./components/**/*.{js,ts,jsx,tsx}&quot;,
      &quot;./layout/**/*.{js,ts,jsx,tsx}&quot;,
      &quot;./const/**/*.{js,ts,jsx,tsx}&quot;,
      &quot;./fonts/**/*.{js,ts,jsx,tsx,ttf}&quot;,
      &quot;./utils/**/*.{js,ts,jsx,tsx}&quot;,
    ],
    darkMode: false,
    theme: {
      extend: {
        colors: {
          &quot;brand-green&quot;: &quot;#4DF69B&quot;,
          &quot;brand-amber&quot;: &quot;#FF8656&quot;,
          &quot;brand-red&quot;: &quot;#FF5656&quot;,
          &quot;brand-gray&quot;: &quot;#7E7E7E&quot;,
        },
        width: {
          content: &quot;fit-content&quot;,
        },
        top: {
          20: &quot;5rem&quot;,
        },
        fontFamily: {
          DINAlternate: [&quot;DINAlternate&quot;, &quot;sans-serif&quot;],
        },
      },
    },
    variants: {
      extend: {
        borderWidth: [&quot;hover&quot;],
        textColor: [&quot;group-focus&quot;],
      },
    },
    plugins: [],
  };
  </code></pre>
  <p>My config.</p>
  <p>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</p>
  <p>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.</p>
  <p>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</p>
  <p>How can I know what is the problem?</p>