Skip to content

Sharing common CSS between themes

This approach can be useful for instances using multiple child themes with only minor differences for different websites.

CSS variables

In tailwind.config.js the desired property is set to a variable, for example a color:

    colors: {
        brand: 'var(--brand-color)'
    }

And somewhere in a stylesheet or style tag in the child theme the variable value is set:

:root {
    --brand-color: #ff0000;
}

It is even possible to get your colors from PHP, which allows building some theme configuration in the admin if you are feeling adventurous.
Add a style tag in a .phtml file where set the variables are set dynamically:

<style>
:root {
    --brand-color: <?= $brandColor ?>
}
</style>

Dynamic configuration

Since the tailwind.config.js file allows for any JavaScript, it is possible to build the configuration dynamically.
An example of such can be seen in the Advanced Purge Configuration documentation.