Tailwindcss Background color not parsed

Question

using tailwindcss and applying background colors does not getting parsed

here is my tailwind config

const colors = require("tailwindcss/colors");
module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      "saibaba-orange": {
        light: "#ff6426",
        DEFAULT: "#ff6426",
        dark: "#ff6426",
      },
    },

    minHeight: {
      0: "0",
      "1/4": "25%",
      "1/2": "50%",
      "3/4": "75%",
      full: "100%",
    },
    extend: {
      fontFamily: {
        sans: ["Lora", "Helvetica", "Arial", "sans-serif"],
      },
      backgroundImage: {
        "hero-pattern":
          "url('/img/banner_bg.png')",
      },
    },
  },
  variants: {
    extend: {
      backgroundColor: [
        "responsive",
        "hover",
        "focus",
        "active",
        "group-hover",
      ],
    },
  },
  corePlugins: {},
  plugins: [require("tailwindcss"), require("precss"), require("autoprefixer")],
};

using in html for example the background class will not produce any output. Inspecting the DOM there is no reference to the CSS class.

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

Answer 1

You are overriding the default colors within your theme.colors. You need to move your custom colors into extend.