77

How can I add colors to default scheme? Here is my tailwindcss file.

const { colors: defaultColors } = require('tailwindcss/defaultTheme')

module.exports = {
    "theme": {
        "colors": defaultColors + {
            "custom-yellow": {
                "500": "#EDAE0A",
            }
        },
    },
};
2

7 Answers 7

153

Add your custom color values to theme > extend > colors section in tailwind.config.js

//tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        colors: {
          'custom-yellow':'#BAA333',
        }
      },
    },  
  }
3
  • 7
    In my case, i've restarted the server then only changes reflected in UI
    – Bahu
    Commented Jan 8, 2021 at 5:00
  • 2
    Why though? What is the difference between color: {} and extend: { color: {} }?
    – Qwerty
    Commented Dec 21, 2022 at 0:58
  • Just a remind, if you still lost original one, please have a check that theme.colors should NOT be a {} (suggest to delete key and value completely) in tailwind.config.js.
    – rosethorn
    Commented Jan 27, 2023 at 2:04
29

You can simply concatinate them using "Array/Object spread operator" (...) and gather them all in a colors variable.

// tailwind.config.js
const { colors: defaultColors } = require('tailwindcss/defaultTheme')

const colors = {
    ...defaultColors,
    ...{
        "custom-yellow": {
            "500": "#EDAE0A",
        },
    },
}

module.exports = {
    "theme": {
        "colors": colors,
    }
};
4
  • While this works, I am not sure why the extend way doesn't work anymore with the tailwind compiler and vscode extension. Commented Dec 12, 2021 at 11:45
  • 1
    @AbdallaArbab Theoretically the extend should also work, but this one is much more core nodejs. Which should work most of the time.
    – Ozan Kurt
    Commented Dec 12, 2021 at 20:54
  • extend works for me in tailwind 3
    – Frizzant
    Commented Dec 31, 2021 at 9:28
  • @AbdallaArbab if extend doesn't work for you, you might have to restart your live-server or whatever you're using to host it, just so it reloads in the JSON cache - that seemed to solve the issue for me
    – Shay
    Commented Jul 7 at 15:48
10

Unfortunately, none of these methods work. But I have found a method that will lead you and me to the goal.

Just enter the names and custom colors in the theme object in tailwind css config file, with this the default colors will remain with their names and your color will be added to the list of classes.

Example - in tailwind.config.js :

      module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        'main': '#e002a2',
        'second': '#47019d',
        'three': '#e00256',
        'black': '#212121',
        'white': '#ffffff',
        'gray': '#808080e2'
      }
    },
  },
  plugins: [],
}
9

You could also pick colors from the tailwind extended color palate. https://tailwindcss.com/docs/customizing-colors#color-palette-reference

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    extend: {
      colors: {
          orange: colors.orange,
      },
    }
  }
}
1
  • This is working, I tried with extend: { colors: { teal: "#008080" } but it did'nt worked, but worked by extend: { colors: { teal: colors.teal } as it is following specific schema based on opacity. Commented Dec 11, 2023 at 14:13
6

Try this code within tailwind.config.js then restart localhost/terminal

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend:
    {
      colors:
      {
        pinkSoft: '#EDC7B7',
        wheat: '#EEE2DC',
        gray: '#BAB2B5',
        blue: '#BADFE7',
        blue2: '#697184',
        pink: '#D8CFD0',
        bg: '#B1A6A4',
        bgDark: '#413F3D',
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
3
  • What does it do?
    – Qwerty
    Commented Dec 21, 2022 at 0:59
  • 3
    All these posts are missing how to use the colors after defining them.
    – Soerendip
    Commented Jan 26 at 10:35
  • 1
    @Soerendip use the name where ever you can add color to: bg-pinkSoft or text-pinkSoft.
    – Hunkoys
    Commented Sep 2 at 15:29
5

Here is how you add mutiple custom colors in tailwind.config.js

theme: {
    extend: {
      colors: {
        primary: {
          100: "#b2d8d8",
          200: "#66b2b2",
          // 300: '#66b2b2', you can skip some colors like this or not even commnet them
          // 400: '',
          500: "#008080",
          700: "#66b2b2",
          900: "#004c4c",
        },
        secondary: {
          100: "##ff9c3c",
          200: "#ff9022",
          300: "#ff8308",
          400: "#ee7600",
          500: "#d56900",
          600: "#bb5d00",
          700: "#a25000",
          800: "#5f2f00",
          900: "#472300",
        },
      },
    },
  },

Colors variable will be shown to you like this

enter image description here

You can also initialize colors by name not by weight if you want, like below

theme: {
        extend: {
            // Add new colors
            colors: {
                'custom-grey': '#EDF1D6',
                'custom-green': '#609966',
                'custom-blue': '#344D67',
            },
        },
    },
0

For tailwind version 3+, this works

In your tailwind.config.js file add this:

const colors = require('tailwindcss/colors')

module.exports = {
  ... existing code
  theme: {
colors: {
  ...colors,
  primary: {
    DEFAULT: '#ff385c',
  }
},
extend: {
  ... existing code
},
  },
  ... existing code
}

You can use this in your html code like this:

<p class="text-primary">Default color text</p>
<p class="bg-primary-light">Light color background</p>
<p class="text-dark">Dark color text</p>

1
  • None of these works.
    – newguy
    Commented Nov 13 at 1:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.