CODEWITHSUNDEEP
reactjstailwind-csstailwind-ui
Soumyadeep
Soumyadeep

Reputation: 11

Tailwind Css custom color disappearing on build (React JS)

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>

Upvotes: 1

Views: 2743

Answers (2)

CleverPatrick
CleverPatrick

Reputation: 9501

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

Upvotes: 0

J.D. Sandifer
J.D. Sandifer

Reputation: 906

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

Upvotes: 2

Related Questions