bg-red-400

Hi @damienlopvet!

You should be able to use any Tailwind utility classes. However, the default configuration shipped with the plugin limits the colors to only a handful to keep the utility class selector snappy.

Could you share your configuration with me? I’m guessing that’s why you’re not seeing it. If you remove the colors key in the configuration file you can access all the default Tailwind colors, such as bg-red-400:

var tailwind = !!tailwind ? tailwind : window.tailwind;

tailwind.config = {
    important: true,
    theme: {
        /* max-width responsive breakpoints */
        screens: {
            md: {
                'max': '1023px'
            },
            sm: {
                'max': '767px'
            },
        },
        colors: {
            primary: tailwind.colors.slate['900'],
            secondary: tailwind.colors.white,
            text: 'var(--color-text)',
            accent: tailwind.colors.sky['500'],
            neutral: tailwind.colors.slate,
            transparent: tailwind.colors.transparent,
            current: tailwind.colors.current,
        },
        extend: {
            boxShadow: {
                inset: 'inset 0 1px 0 0 rgb(255 255 255 / 20%)',
            },
            fontFamily: {
                primary: tailwind.defaultConfig.theme.fontFamily.sans,
                secondary: tailwind.defaultConfig.theme.fontFamily.sans,
                text: tailwind.defaultConfig.theme.fontFamily.sans,
                accent: tailwind.defaultConfig.theme.fontFamily.sans,
            },
            listStyleType: {
                circle: 'circle',
                square: 'square',
            },
        },
    },
    corePlugins: {
        preflight: false,
    },
}