Extended colors from tailwind.config.js not available in theme.json

Hi all,

This is my tailwind.config.json setup:

/** @type {import('tailwindcss').Config} config */
const config = {
    content: ['./app/**/*.php', './resources/**/*.{php,vue,js}'],
    theme: {
        container: {
            center: true,
            padding: '1rem',
        },
        extend: {
            colors: {
                primary: '#5D5DFF',
                secondary: '#FF5050',
                dark_gray: '#1A1818',
                light_gray: '#F1F1F1'
            },
            fontFamily: {
                montserrat: 'Montserrat, sans-serif',
            },
        },
    },
    plugins: [
        require('tailwindcss-debug-screens'),
    ]
};

export default config;

Now I want these colors to be added in my theme.json. But they are not being included, this is my bud.config.js set-up:

/**
     * Generate WordPress `theme.json`
     *
     * @note This overwrites `theme.json` on every build.
     *
     * @see {@link https://bud.js.org/extensions/sage/theme.json}
     * @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json}
     */
    app.wpjson
        .setOption('styles', {
            typography: {
                fontFamily: 'var(--wp--preset--font-family--montserrat)',
            },
        })
        .setSettings({
            background: {
                backgroundImage: true,
            },
            color: {
                custom: false,
                customDuotone: false,
                customGradient: false,
                defaultDuotone: false,
                defaultGradients: false,
                defaultPalette: false,
                duotone: [],
            },
            custom: {
                spacing: {},
                typography: {
                    'font-size': {},
                    'line-height': {},
                },
            },
            spacing: {
                padding: true,
                units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
            },
            layout: {
                contentSize: '1500px',
                wideSize: '2000px',
            },
            typography: {
                customFontSize: false,
                fontFamilies: [
                    {
                        slug: 'montserrat',
                        name: 'Montserrat',
                        fallbacks: ['sans-serif'],
                    }
                ],
            },
        })
        .useTailwindColors()
        .useTailwindFontFamily()
        .useTailwindFontSize();

All default tailwind colors are being added but my colors from the tailwind config file are not being added. Does somebody know why not?

Thanks!

Have you tried wrapping those color names in single quotes? That’s how the tailwind docs example includes them. Adding Custom Styles - Tailwind CSS

colors: {
    'primary': '#5D5DFF',
    'secondary': '#FF5050',
    'dark_gray': '#1A1818',
    'light_gray': '#F1F1F1'
},

That still doesn’t work…

The issue was because of following plug-in;