Add custom gradients with --tw-gradient-stops in theme

[manuelmeister]

It would be beneficial to define --tw-gradient-stops css variable in the theme for often used gradients.

Theme config:

module.exports = {
    theme: {
        gradients: {
            blue: "#26224C 0%, #0114C2 100%",
        }
    }
}

Generated css:

.gradient-blue {
    --gradient-color-stops: #26224C 0%, #0114C2 100%;
}

Workaround Plugin

plugin(function ({addUtilities, e, theme}) {
    const gradients = theme('gradients', {})
    const utilities = Object.entries(gradients).map(([name, gradient]) => ({
        [`.${e(`gradient-${name}`)}`]: {
            '--gradient-color-stops': gradient
        }
    }));

    addUtilities(utilities);
}),