0

My custom color "primary" is not working on the build mode and disappears. But on development mode it is present.

tailwind.config.js

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        primary: "#C62C2C",
        secondary: "#6558f5",
        dark: "#000000",
      },
    },
    fontFamily: {
      body: ["Inter", "sans-serif"],
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Button Component

const Button = (props) => {
  return (
    <button
      className={`rounded-lg ${props.className ? props.className : "1"} ${
        props.padding
      } text-sm text-white bg-${props.color}`}
      onClick={props.onClick}
    >
      {props.children}
    </button>
  );
};

Calling Button Component

 <Button color="primary" padding="px-6 py-2"></Button>
Soumyadeep
  • 1
  • 1

1 Answers1

1

If your color is passed down via props.color to be added to bg- to create bg-primary, then that's the problem.

The purge feature for Tailwind in production looks for the full text of classes and removes ones it doesn't find. Because the text is being assembled in the code, it's not finding bg-primary anywhere and not including that in the CSS it builds.

The easiest solution would probably be to pass the full class name instead of just the color part in props.color (i.e. bg-primary instead of just primary).

See the docs for more info: https://v2.tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html

J.D. Sandifer
  • 814
  • 9
  • 20
  • Hi, What if we want the colour to be dynamic? Should we mention the required classes elsewhere tricking "purge" to ignore them? – Nipuna Nov 30 '21 at 13:54
  • EDIT to the above comment: It did work, not sure it's a good practice. Any ideas? – Nipuna Nov 30 '21 at 14:00
  • I'd recommend passing the full class name - maybe as props.colorClass - or using a dictionary object (with color names as the properties and class names as the values so you can look up the appropriate values) instead of simply adding the class name elsewhere. (Both for clarity and ease of maintenance.) – J.D. Sandifer Jan 05 '22 at 18:52