'When colors are set in tailwind.config.js the default tailwind colors won't work anymore

I am using Tailwind for a little Wordpress project I am creating. So I have set things up with webpack. This works absolutely fine. Tailwind does its tree shaking and only adds the classes into to the end File I actually used.

I have the following config to overwrite some of the default colors:

module.exports = {
  content: [
    './inc/blocks/*.php',
    './archive.php',
    './footer.php',
    './header.php',
    './index.php',
    './single.php',
  ],
  darkMode: "class",
  theme: {
    extend: {},
      colors: {
        'amber': {
          100: '#fff8e1',
          200: '#ffecb3',
          300: '#ffe082',
          400: '#F7CE64',
          500: '#deb95a',
          600: '#c69e56',
          700: '#af8c4c',
          800: '#977b3c',
          900: '#856a2c',
        },
        'lime': {
          100: '#afeacd',
          200: '#9be5c1',
          300: '#86dfb4',
          400: '#36CA82',
          500: '#2ba268',
          600: '#1f9357',
          700: '#197b4e',
          800: '#126a45',
          900: '#0e5a3c',
        },
        'rose': {
          100: '#fbe9e7',
          200: '#ffccc7',
          300: '#ffa7a7',
          400: '#C88986',
          500: '#B77C7C',
          600: '#8A575C',
          700: '#7C4C4C',
          800: '#6F4240',
          900: '#633C3C',
        },
      },
      fontFamily: {
        'title': ['Poppins', 'sans-serif'],
        'body': ['Merriweather', 'serif'],
      },
    },
    plugins: [],
}

This works absolutely fine. For example, if I use one of the colors to set a background on a div, this works.

<div class="h-20 w-20 bg-amber-400"></div>

But if I now want to use default tailwind colors, which I have not changed the value for like the following, it won't work.

<div class="h-20 w-20 bg-zinc-400"></div>

As an experiment I tried removing the color configuration I have set in the tailwind config. And sure enough it worked again. Is this supposed to be like that? All default colors being deleted when you overwrite just some of the default colors?

I would like to be able to just define my own colors on top of the existing ones, but keep the ones I haven't overwritten, how would I accomplish this?

htmlcsstailwind-css


Solution 1:[1]

If you want to preserve tailwind's default colors along with your custom defined ones, you need to move the color object inside the extend.

module.exports = {
  content: [
    './inc/blocks/*.php',
    './archive.php',
    './footer.php',
    './header.php',
    './index.php',
    './single.php',
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        amber: {
          100: '#fff8e1',
          200: '#ffecb3',
          300: '#ffe082',
          400: '#F7CE64',
          500: '#deb95a',
          600: '#c69e56',
          700: '#af8c4c',
          800: '#977b3c',
          900: '#856a2c',
        },
        lime: {
          100: '#afeacd',
          200: '#9be5c1',
          300: '#86dfb4',
          400: '#36CA82',
          500: '#2ba268',
          600: '#1f9357',
          700: '#197b4e',
          800: '#126a45',
          900: '#0e5a3c',
        },
        rose: {
          100: '#fbe9e7',
          200: '#ffccc7',
          300: '#ffa7a7',
          400: '#C88986',
          500: '#B77C7C',
          600: '#8A575C',
          700: '#7C4C4C',
          800: '#6F4240',
          900: '#633C3C',
        },
      },
    },
    fontFamily: {
      title: ['Poppins', 'sans-serif'],
      body: ['Merriweather', 'serif'],
    },
  },
  plugins: [],
}

Demo: https://play.tailwindcss.com/SeTdKxyNlM?file=config

Source: https://tailwindcss.com/docs/theme#extending-the-default-theme

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Omer Iqbal

Related Questions