Tailwind Css custom color disappearing on build (React JS)

Question

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>

Are all the other stylings present in your build version?

Rifky Niyas
– Rifky Niyas

2021-08-24 10:16:51 +00:00
Commented Aug 24, 2021 at 10:16 — Rifky Niyas
– Rifky Niyas, Commented Aug 24, 2021 at 10:16

J.D. Sandifer · Accepted Answer · 2022-01-05 18:57:17Z

2

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

edited Jan 5, 2022 at 18:57

answered Aug 27, 2021 at 22:17

J.D. Sandifer

92410 silver badges20 bronze badges

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

3 Comments

Nipuna Over a year ago

Hi, What if we want the colour to be dynamic? Should we mention the required classes elsewhere tricking "purge" to ignore them?

Nipuna Over a year ago

EDIT to the above comment: It did work, not sure it's a good practice. Any ideas?

J.D. Sandifer Over a year ago

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.)

CleverPatrick · Accepted Answer · 2024-02-12 12:35:45Z

0

Easier answer is to add them to the safelist in your tailwind.config.ts:

https://v2.tailwindcss.com/docs/optimizing-for-production#safelisting-specific-classes

answered Feb 12, 2024 at 12:35

CleverPatrick

9,5715 gold badges68 silver badges88 bronze badges

Collectives™ on Stack Overflow

Tailwind Css custom color disappearing on build (React JS)

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related