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

bud
1

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!

2

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'
},
3

That still doesn’t work…

4

The issue was because of following plug-in;

1 Like