Custom tailwind colors from tailwind.config.js not generated

Question

I'm currently working on an Angular Project using tailwind.

I'd like to add custom colors, so I modified my tailwind config file:

require('dotenv').config();
const enablePurge = process.env.ENABLE_PURGE === 'true';
module.exports = {
    theme     : {
        extend : {
            colors          : {
                'navy'             : '#102059',
                'argo-dark-blue'   : '#102059',
                'argo-bluish-gray' : '#F4F5F9',
                'argo-light-blue'  : '#9BE5F8',
                'argo-purple'      : '#9f6af9',
            },
            backgroundColor : (theme) => theme('colors'),
            textColor : (theme) => theme('colors'),
        },
    },
    important : true,
    purge     : {
        enabled : enablePurge,
        content : [ './src/**/*.html', './src/**/*.scss' ],
    },
    theme     : {
        extend : {},
    },
    variants  : {},
    plugins   : [],
};

I'm using webpack, postcss, ng serve with hmr configuration. I'm using ng-tailwindcss to build. Here are my package.json scripts:

 "scripts": {
    ...
    "start": "ng serve --configuration hmr",
    "build": "ngtw build && ng build",
    ...
    "prestart": "ngtw build"
  },

I'm then trying to change the background color of an element:

<span class="fa fa-file-pdf flex justify-center items-center rounded-xl text-xl w-11 h-11 mr-1 bg-argo-light-blue"></span>

Even when disabling the purge, the custom css classes do not appear in the final css file, so the element has no background color.

Answer 1

You've duplicated theme :

You define it here

{
// ...
    theme: {
        extend: {
            colors: {
                'navy': '#102059',
                'argo-dark-blue': '#102059',
                'argo-bluish-gray': '#F4F5F9',
                'argo-light-blue': '#9BE5F8',
                'argo-purple': '#9f6af9',
            },
            backgroundColor: (theme) => theme('colors'),
            textColor: (theme) => theme('colors'),
        },
    },
// ...
}

Then immediately redefine it here

{
// ...
    theme: {
        extend : {},
    },
// ...
}

Remove the second one and your config should work properly.