CODEWITHSUNDEEP
colorstailwind-css
IVN
IVN

Reputation: 241

Tailwind CSS extend standard colors in tailwind.config.js. When I try to extend colors, all other colors are deleted

When I try to add some colors to tailwind.css all the other colors are deleted. Here is my tailwind.config.js file:

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    purge: [
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },

        // colors: {
        //     smoke: {
        //         darkest: 'rgba(0, 0, 0, 0.9)',
        //         darker: 'rgba(0, 0, 0, 0.75)',
        //         dark: 'rgba(0, 0, 0, 0.6)',
        //         DEFAULT: 'rgba(0, 0, 0, 0.5)',
        //         light: 'rgba(0, 0, 0, 0.4)',
        //         lighter: 'rgba(0, 0, 0, 0.25)',
        //         lightest: 'rgba(0, 0, 0, 0.1)',
        //     },
        // },


        colors: {
            'smoke-darkest': 'rgba(0, 0, 0, 0.9)',
            'smoke-darker': 'rgba(0, 0, 0, 0.75)',
            'smoke-dark': 'rgba(0, 0, 0, 0.6)',
            'smoke': 'rgba(0, 0, 0, 0.5)',
            'smoke-light': 'rgba(0, 0, 0, 0.4)',
            'smoke-lighter': 'rgba(0, 0, 0, 0.25)',
            'smoke-lightest': 'rgba(0, 0, 0, 0.1)',
        },


    },

    variants: {
        opacity: ['responsive', 'hover', 'focus', 'disabled'],
    },

    plugins: [require('@tailwindcss/ui')],
};

After I "run npm dev" there are no other colors except those which I tried to add. How can I add those colors without deleting others?

Commented section is just a try of different syntax, they both work the same.

Upvotes: 2

Views: 3259

Answers (1)

Tom
Tom

Reputation: 860

You need to put your colors within the extend object:

module.exports = {
  theme: {
    extend: {
      colors: {
        'smoke-darkest': 'rgba(0, 0, 0, 0.9)',
        'smoke-darker': 'rgba(0, 0, 0, 0.75)',
        'smoke-dark': 'rgba(0, 0, 0, 0.6)',
        'smoke': 'rgba(0, 0, 0, 0.5)',
        'smoke-light': 'rgba(0, 0, 0, 0.4)',
        'smoke-lighter': 'rgba(0, 0, 0, 0.25)',
        'smoke-lightest': 'rgba(0, 0, 0, 0.1)',
      }
    }
  }
}

See the docs: https://tailwindcss.com/docs/customizing-colors#extending-the-defaults

Upvotes: 2

Related Questions