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':                             "#8066e1",
                'vertical-menu-item-bg-hover':                          '#eeecfb',
                'vertical-menu-item-active':                            "#8066e1",
                'vertical-menu-item-bg-active':                         '#eeecfb',
                'vertical-menu-sub-item':                               colors.slate[400],
                'vertical-menu-sub-item-hover':                         "#8066e1",
                'vertical-menu-sub-item-active':                        "#8066e1",

                //sidebar dark
                'vertical-menu-dark':                                   colors.zinc[900],
                'vertical-menu-border-dark':                            colors.zinc[900],
                'vertical-menu-item-dark':                              colors.zinc[500],
                'vertical-menu-item-hover-dark':                        "#8066e1",
                'vertical-menu-item-bg-hover-dark':                     colors.zinc[800],
                'vertical-menu-item-active-dark':                       "#8066e1",
                'vertical-menu-item-bg-active-dark':                    colors.zinc[800],
                'vertical-menu-sub-item-dark':                          colors.zinc[500],
                'vertical-menu-sub-item-hover-dark':                    "#8066e1",
                'vertical-menu-sub-item-active-dark':                   "#8066e1",
                
                //sidebar brand
                'vertical-menu-brand':                                  '#472c86',
                'vertical-menu-border-brand':                           '#472c86',
                'vertical-menu-item-brand':                             '#c4bef4',
                'vertical-menu-item-hover-brand':                       '#f5f4fe',
                'vertical-menu-item-bg-hover-brand':                    "#523595",
                'vertical-menu-item-active-brand':                      '#f5f4fe',
                'vertical-menu-item-bg-active-brand':                   "#523595",
                'vertical-menu-sub-item-brand':                         "#bda6f1",
                'vertical-menu-sub-item-hover-brand':                   '#f5f4fe',
                'vertical-menu-sub-item-active-brand':                  '#f5f4fe',
                
                //sidebar modern
                'vertical-menu-to-modern':                              '#472c86',
                'vertical-menu-via-modern':                             '#5534a3',
                'vertical-menu-form-modern':                            colors.blue[900],
                'vertical-menu-border-modern':                          '#472c86',
                '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':                     '#f5f4fe',
                '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
                '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':                                            colors.zinc[900],
                'topbar-border-dark':                                     colors.zinc[700],
                'topbar-item-dark':                                       colors.zinc[400],
                'topbar-item-hover-dark':                                 colors.zinc[100],
                'topbar-item-bg-hover-dark':                              colors.zinc[800],
                
                'topbar-brand':                                            '#472c86',
                'topbar-border-brand':                                     '#5534a3',
                'topbar-item-brand':                                       "#eeecfb",
                'topbar-item-hover-brand':                                 colors.white,
                'topbar-item-bg-hover-brand':                              "#5534a3",
                
                'topbar-modern':                                            colors.white,
            },
        },
    }
}