52

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",
            }
        },
    },
};
1

7 Answers 7

116

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
  • 6
    In my case, i've restarted the server then only changes reflected in UI
    – Bahu
    Jan 8, 2021 at 5:00
  • Why though? What is the difference between color: {} and extend: { color: {} }?
    – Qwerty
    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. Jan 27 at 2:04
23

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,
    }
};
3
  • While this works, I am not sure why the extend way doesn't work anymore with the tailwind compiler and vscode extension. 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
    Dec 12, 2021 at 20:54
  • extend works for me in tailwind 3
    – Frizzant
    Dec 31, 2021 at 9:28
8

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
  • 1
    Login only to vote for your answer!
    – novax
    Jul 15 at 10:19
6

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: [],
}
5

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: [],
}
1
  • What does it do?
    – Qwerty
    Dec 21, 2022 at 0:59
0
theme: {
    extend: {
      colors:{
        'primary':'#D3B647'
      },
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
0

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',
            },
        },
    },

Your Answer

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

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