Home Plugin documentation Styles Configuration Color with variants



Here we go!


Color with variants

To add colors with variants, go to Pilo’Press > Styles > Configuration > Colors.


By “Colors with variants“, we mean colors like TailwindCSS does by default (gray-500 is a variant of gray).



Thanks to this UI, we can change your colors without writing Javascript.


The equivalent of the data above is this:

module.exports = {
    'theme': {
        'colors': {
            'gray': {
                'DEFAULT': '#a0aec0',
                '100': '#f8fafc',
                '200': '#edf2f7',
                '300': '#e1e7ef',
                '400': '#ccd6e0',
                '500': '#a0aec0',
                '600': '#728197',
                '700': '#4a5568',
                '800': '#2d3748',
                '900': '#1a212d'

Override colors


You can choose to override default colors or to complete them thanks to this toggle:

(It will affect compiled CSS file size.)



TailwindCSS default palette


You didn’t find the answer you were looking for?

or you think a specific topic deserve more informations?


Wave to bottom