Customizing Colors | Tailwick - Admin & Dashboard Template

Customizing Sidebar & Topbar

Customizing the default color palette for Tailwick.

How to change Sidebar & Topbar size?

If you’d like to completely replace the default color palette with your own custom colors, add your colors directly under the theme.colors section of your configuration file:

module.exports = {
    theme: {
        extend: {
            spacing: {
                'header':                                               '4.375rem', // 70px 
                'vertical-menu':                                        '16.25rem', // 260px default size
                'vertical-menu-md':                                     '10.3125rem',// 165px compact size
                'vertical-menu-sm':                                     '4.375rem', // 70px icons (small) size
            },
        },
    }
}

How to change Sidebar color?

const colors = require('tailwindcss/colors');
module.exports = {
    theme: {
        extend: {
            colors: {
                //sidebar light
                'vertical-menu':                                        colors.white,
                'vertical-menu-border':                                 colors.slate[200],
                'vertical-menu-item':                                   colors.slate[400],
                'vertical-menu-item-hover':                             colors.blue[500],
                'vertical-menu-item-bg-hover':                          colors.blue[50],
                'vertical-menu-item-active':                            colors.blue[500],
                'vertical-menu-item-bg-active':                         colors.blue[50],
                'vertical-menu-sub-item':                               colors.slate[400],
                'vertical-menu-sub-item-hover':                         colors.blue[500],
                'vertical-menu-sub-item-active':                        colors.blue[500],

                //sidebar dark
                'vertical-menu-dark':                                   colors.slate[900],
                'vertical-menu-border-dark':                            colors.slate[900],
                'vertical-menu-item-dark':                              colors.slate[500],
                'vertical-menu-item-hover-dark':                        colors.blue[500],
                'vertical-menu-item-bg-hover-dark':                     colors.slate[800],
                'vertical-menu-item-active-dark':                       colors.blue[500],
                'vertical-menu-item-bg-active-dark':                    colors.slate[800],
                'vertical-menu-sub-item-dark':                          colors.slate[500],
                'vertical-menu-sub-item-hover-dark':                    colors.blue[500],
                'vertical-menu-sub-item-active-dark':                   colors.blue[500],
                
                //sidebar brand
                'vertical-menu-brand':                                  colors.blue[900],
                'vertical-menu-border-brand':                           colors.blue[900],
                'vertical-menu-item-brand':                             colors.blue[300],
                'vertical-menu-item-hover-brand':                       colors.blue[50],
                'vertical-menu-item-bg-hover-brand':                    "#224097",
                'vertical-menu-item-active-brand':                      colors.blue[50],
                'vertical-menu-item-bg-active-brand':                   "#224097",
                'vertical-menu-sub-item-brand':                         "#a4bbfd",
                'vertical-menu-sub-item-hover-brand':                   colors.blue[50],
                'vertical-menu-sub-item-active-brand':                  colors.blue[50],
                
                //sidebar modern
                'vertical-menu-to-modern':                              colors.blue[900],
                'vertical-menu-form-modern':                            colors.green[900],
                'vertical-menu-border-modern':                          colors.blue[900],
                'vertical-menu-item-modern':                            "rgba(255, 255, 255, 0.60)",
                'vertical-menu-item-hover-modern':                      "rgba(255, 255, 255)",
                'vertical-menu-item-bg-hover-modern':                   "rgba(255, 255, 255, 0.06)",
                'vertical-menu-item-active-modern':                     colors.blue[50],
                'vertical-menu-item-bg-active-modern':                  "rgba(255, 255, 255, 0.06)",
                'vertical-menu-sub-item-modern':                        "rgba(255, 255, 255, 0.50)",
                'vertical-menu-sub-item-hover-modern':                  colors.white,
                'vertical-menu-sub-item-active-modern':                 colors.white,
            },
        },
    }
}

How to change Topbar color?

const colors = require('tailwindcss/colors');
module.exports = {
    theme: {
        extend: {
            colors: {
                //TOPBAR Light
                'topbar':                                                 colors.white,
                'topbar-border':                                          colors.slate[200],
                'topbar-item':                                            colors.slate[700],
                'topbar-item-hover':                                      colors.slate[800],
                'topbar-item-bg-hover':                                   colors.slate[100],
                
                //Topbar Dark
                'topbar-dark':                                            colors.slate[900],
                'topbar-border-dark':                                     colors.slate[700],
                'topbar-item-dark':                                       colors.slate[400],
                'topbar-item-hover-dark':                                 colors.slate[100],
                'topbar-item-bg-hover-dark': colors.slate[800],
                
                //Topbar Brand
                'topbar-brand':                                            colors.blue[900],
                'topbar-border-brand':                                     colors.blue[800],
                'topbar-item-brand':                                       "#a4bbfd",
                'topbar-item-hover-brand':                                 colors.white,
                'topbar-item-bg-hover-brand':                              "#224097",
            },
        },
    }
}