Question 401457 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Tailwind custom colors along with default colors

In my tailwind config, i would like to be able to add some custom colors BUT also use all of tailwinds as well, e.g. i add a green but then can also use green-500.

Here is my config:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  variants: {
    extend: {
      display: ['group-hover'],
    },
  },
  theme: {
    extend: {
      animation: {
        pulse: 'pulse 2s infinite',
      },
      keyframes: {
        pulse: {
          '0%, 100%': { opacity: 1 },
          '50%': { opacity: 0.5 },
        },
      },
      borderWidth: {
        1: '1px',
      },
      spacing: {
        18: '4.5rem',
      },
      colors: {
        dark: '#242424',
        paperdark: '#343434',
        bright: '#f1f0eb',
        cyan: '#5ccabe',
        green: '#71b468',
        red: '#ee6022',
        white: '#ffffff',
      },
    },
  },
  // eslint-disable-next-line @typescript-eslint/no-var-requires
  plugins: [require('tailwind-scrollbar')({ nocompatible: true })],
};

But whenever I try to use like text-blue-500 or bg-blue-500 i dont see the color.

Tags:

2

Answers


  1. 0

    You could try adding the color to green-* instead of replacing the original green property.

    When extending colors in extend, the original colors will be inherited directly. You only need to add your colors to the corresponding color property object:

    /** @type {import('tailwindcss').Config} */

export default {
  theme: {
    extend: {
      colors: {
        green: {
          custom: '#71b468', // <-- Add your custom green colors in this object.
        },
      },
    },
  },
  plugins: [],
}

    Usage:

    <div class="bg-green-custom h-32"></div>
<div class="bg-green-500 h-32"></div>

    Demo on Tailwind Play.

    Login or Signup to reply.
  2. 0

    You could as replace as add your custom naming

    /** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{ts,tsx}'],
  prefix: '',
  theme: {
      extend: {
        colors: {
          green: {
            DEFAULT: '#555652' //to change the default value for green
            10: "#111111" // to add custom name as part of whole greens
          }
        },
      },
    },
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search