Theme Configuration

A guide to configuring and customizing your Tailwind.

By default, Tailwind will look for an optional tailwind.config.js file at the root of your project where you can define any customizations.

Theme

The theme section is where you define your color palette, fonts, type scale, border sizes, breakpoints — anything related to the visual design of your site.

const colors = require('tailwindcss/colors'); module.exports = { theme: { fontFamily: { 'public': ['"Roboto Flex", sans-serif'], 'remix': ['remixicon'] }, container: { center: true, }, extend: { fontSize: { sm: '0.8125rem',//13px base: '0.875rem',//14px 15: '0.9375rem',//15px 16: '1rem',//16px 'vertical-menu-item-font-size': "0.875rem", }, colors: { 'body': colors.slate[800], 'body-bg': colors.gray[100], //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, //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, custom: { '50': '#f5f4fe', '100': '#eeecfb', '200': '#dddbf9', '300': '#c4bef4', '400': '#a699ec', '500': '#8066e1', '600': '#7550d7', '700': '#663ec3', '800': '#5534a3', '900': '#472c86', '950': '#2b1b5a', }, red: { '50': colors.red[50], '100': colors.red[100], '200': colors.red[200], '300': colors.red[300], '400': colors.red[400], '500': colors.red[500], '600': colors.red[600], '700': colors.red[700], '800': colors.red[800], '900': colors.red[900], '950': colors.red[950], }, green: { '50': '#f0feef', '100': '#ddfddb', '200': '#bcfab8', '300': '#87f382', '400': '#4be444', '500': '#1fbc19', '600': '#16a910', '700': '#138510', '800': '#156813', '900': '#125611', '950': '#033004', }, yellow: { '50': '#fffcea', '100': '#fff7c5', '200': '#ffef86', '300': '#ffe147', '400': '#ffcf1d', '500': '#fdaf04', '600': '#e08500', '700': '#ba5d03', '800': '#974709', '900': '#7c3b0b', '950': '#471d01', }, orange: { 50: colors.orange[50], 100: colors.orange[100], 200: colors.orange[200], 300: colors.orange[300], 400: colors.orange[400], 500: colors.orange[500], // Using Tailwind's color palette 600: colors.orange[600], 700: colors.orange[700], 800: colors.orange[800], 900: colors.orange[900], 950: colors.orange[950], }, sky: { 50: colors.cyan[50], 100: colors.cyan[100], 200: colors.cyan[200], 300: colors.cyan[300], 400: colors.cyan[400], 500: colors.cyan[500], // Using Tailwind's color palette 600: colors.cyan[600], 700: colors.cyan[700], 800: colors.cyan[800], 900: colors.cyan[900], 950: colors.cyan[950], }, purple: { 50: colors.purple[50], 100: colors.purple[100], 200: colors.purple[200], 300: colors.purple[300], 400: colors.purple[400], 500: colors.purple[500], // Using Tailwind's color palette 600: colors.purple[600], 700: colors.purple[700], 800: colors.purple[800], 900: colors.purple[900], 950: colors.purple[950], }, zink: { '50': '#f6f6f6', '100': '#e7e7e7', '200': '#d1d1d1', '300': '#b0b0b0', '400': '#888888', '500': '#6d6d6d', '600': '#5d5d5d', '700': '#2c2c2c', '800': '#222222', '900': '#1c1c1c', '950': '#121212', }, }, spacing: { 'header': '4.375rem', // 70px 'vertical-menu': '16.25rem', // 260px 'vertical-menu-md': '10.3125rem',// 165px 'vertical-menu-sm': '4.375rem', // 70px }, maxWidth: { 'boxed': '87.5rem', // 1400px }, minHeight: { 'sm': '1650px', // 1650px }, zIndex: { 'drawer': '1050', }, backgroundImage: { 'auth-pattern': "url('/assets/images/auth-bg.jpg')", 'auth-pattern-dark': "url('/assets/images/auth-bg-dark.jpg')", }, animation: { 'icons': 'iconsAnimation 50s', 'progress': 'progressAnimation 2s', }, keyframes: { iconsAnimation: { 'to': { strokeDashoffset: '500' } }, progressAnimation: { '0%': { width: '0' } } }, aspectRatio: { '1/1': '1 / 1', '4/3': '4 / 3', '16/9': '16 / 9', '21/9': '21 / 9', }, clipPath: { 'triangle': 'polygon(50% 0%, 0% 100%, 100% 100%)', }, }, }, }

Learn more about the default theme and how to customize it in the theme configuration guide.

How to change Font Family?

By default, Tailwind provides three font family utilities: a cross-browser sans-serif stack, a cross-browser serif stack, and a cross-browser monospaced stack. You can change, add, or remove these by editing the theme.fontFamily section of your Tailwind config.

module.exports = { theme: { fontFamily: { 'public': ['"Roboto Flex", sans-serif'], }, } }
How to change Font Size (Base)?

You can configure your own custom set of font size utilities using the theme.fontSize section of your tailwind.config.js file.

module.exports = { theme: { extend: { fontSize: { base: '0.875rem',//14px } } } }