Unable to utilize custom colors and their associated classes

[ciokan]

I have this config:

module.exports = {
    important: true,
    theme    : {
        extend: {
            colors    : {
                secondary   : '#000',
            },
        }
    },
};

If I use bg-primary in my code it works but if I use it inside twin.macro styled components it errors out from webpack: ✕ bg-secondary was not found

This doesn't work:

const NavBtn = styled.a(
    () => [
        tw`bg-secondary`
    ]
);

This works and bg-secondary has the appropriate values generated:

const Nav = (props) => {
    return (
        <a className="bg-secondary">yada yada</a>
    );
};

This is how I import tailwind in my main CSS:

@tailwind base;
@tailwind components;
@tailwind utilities

This is how I import my main css inside gatsby-browser:

import './src/static/styles/global.css';

Is there something missing with twin.macro that I'm not seeing?
P.S. I am clearing the .cache/ folder and also node_modules/.cache/babel-loader/*

[ben-rogerson]

It shouldn't be a babel cache issue then since you've cleared your cache folders. Perhaps make a change in the Nav component file to trigger a recompile just to make sure.

I replicated your setup here and got it working so perhaps you could compare.
Make sure your config matches the twin config in package.json too.