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>

You will need to extend the config for colors if you need the default one's to be present. You are overriding the default colors with your own. v2.tailwindcss.com/docs/theme#customizing-the-default-theme — MJN
– MJN, Commented Feb 3, 2022 at 14:36

Dexsnake · Accepted Answer · 2022-02-03 20:59:56Z

3

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

answered Feb 3, 2022 at 20:59

Dexsnake

912 bronze badges

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

Collectives™ on Stack Overflow

Tailwindcss Background color not parsed

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related