Preview Purchase
License Reminder
One license allows using Metronic for a single deployment and all subsequent usage requires a separate license.
If you plan to use Metronic in a Software as a Service (SaaS) model with paid subscriptions, you'll need an Extended License.
Customization

Theming

Metronic's unique look and feel, which stands out from the crowd, is achieved by deeply extending Tailwind CSS with additional components and utilities. This page guides you through how Tailwind CSS is extended via tailwind.config.js in various aspects to provide a comprehensive theming solution for your applications.

Base

The section theme.extend.base of the tailwind.config.js file sets custom color and box-shadow properties for both light and dark themes.

Gray Colors

Custom gray colors are set via theme.custom.base.gray for both light and dark themes, and can be utilized as guided in Tailwind Color Utilities .
tailwind.config.js HTML 
				
					module.exports = {
	theme: {
		extend: {
			base: {
				colors: {
					gray: {
						light: {
							100: '#F9F9F9',
							200: '#F1F1F4',
							300: '#DBDFE9',
							400: '#C4CADA',
							500: '#99A1B7',
							600: '#78829D',
							700: '#4B5675',
							800: '#252F4A',
							900: '#071437',
						},
						dark: {
							100: '#1B1C22',
							200: '#26272F',
							300: '#363843',
							400: '#464852',
							500: '#636674',
							600: '#808290',
							700: '#9A9CAE',
							800: '#B5B7C8',
							900: '#F5F5F5'
						}
					}
				}
			}
		}
	}
};

Contextual Colors

Custom contextual colors are set via theme.custom.base.contextual for both light and dark themes, with each color type offering 5 variants. These advanced color types are used in Tailwind components, such as Tailwind Buttons and Tailwind Badges .
Variant Description
default The standard color used for initial state.
active The color applied when an element is active or hovered.
light A lighter shade of the default color, often used for highlights or borders.
clarity A semi-transparent version of the default color, useful for overlays and shadows.
inverse A contrasting color, typically used for text or elements on the default background.
tailwind.config.js HTML 
				
					module.exports = {
	theme: {
		extend: {
			base: {
				colors: {
					contextual: {
						light: { 
							brand: {
								default: '#FF6F1E',
								active: '#F15700',
								light: '#FFF5EF',
								clarity: 'rgba(255, 111, 30, 0.20)',
								inverse: '#ffffff'
							},
							primary: {
								default: '#1B84FF',
								active: '#056EE9',
								light: '#EFF6FF',
								clarity: 'rgba(27, 132, 255, 0.20)',
								inverse: '#ffffff'
							},
							success: {
								default: '#17C653',
								active: '#04B440',
								light: '#EAFFF1',
								clarity: 'rgba(23, 198, 83, 0.20)',
								inverse: '#ffffff'
							},
							info: {
								default: '#7239EA',
								active: '#5014D0',
								light: '#F8F5FF',
								clarity: 'rgba(114, 57, 234, 0.20)',
								inverse: '#ffffff'
							},
							danger: {
								default: '#F8285A',
								active: '#D81A48',
								light: '#FFEEF3',
								clarity: 'rgba(248, 40, 90, 0.20)',
								inverse: '#ffffff'
							},
							warning: {
								default: '#F6B100',
								active: '#DFA000',
								light: '#FFF8DD',
								clarity: 'rgba(246, 177, 0, 0.20)',
								inverse: '#ffffff'
							},
							dark: {
								default: '#1E2129',
								active: '#111318',
								light: '#F9F9F9',
								clarity: 'rgba(30, 33, 41, 0.20)',
								inverse: '#ffffff'
							},
							light: {
								default: '#ffffff',
								active: '#FCFCFC',
								light: '#ffffff',
								clarity: 'rgba(255, 255, 255, 0.20)',
								inverse: '#4B5675'
							},
							secondary: {
								default: '#F9F9F9',
								active: '#F9F9F9',
								light: '#F9F9F9',
								clarity: 'rgba(249, 249, 249, 0.20)',
								inverse: '#4B5675'
							}
						},
						dark: {
							brand: {
								default: '#D74E00',
								active: '#F35700',
								light: '#272320',
								clarity: 'rgba(215, 78, 0, 0.20)',
								inverse: '#ffffff',
							},
							primary: {
								default: '#006AE6',
								active: '#107EFF',
								light: '#172331',
								clarity: 'rgba(0, 106, 230, 0.20)',
								inverse: '#ffffff'
							},
							success: {
								default: '#00A261',
								active: '#01BF73',
								light: '#1F2623',
								clarity: 'rgba(0, 162, 97, 0.20);',
								inverse: '#ffffff'
							},
							info: {
								default: '#883FFF',
								active: '#9E63FF',
								light: '#272134',
								clarity: 'rgba(136, 63, 255, 0.20)',
								inverse: '#ffffff'
							},
							danger: {
								default: '#E42855',
								active: '#FF3767',
								light: '#302024',
								clarity: 'rgba(228, 40, 85, 0.20)',
								inverse: '#ffffff'
							},
							warning: {
								default: '#C59A00',
								active: '#D9AA00',
								light: '#242320',
								clarity: 'rgba(197, 154, 0, 0.20)',
								inverse: '#ffffff'
							},
							dark: {
								default: '#272A34',
								active: '#2D2F39',
								light: '#1E2027',
								clarity: 'rgba(39, 42, 52, 0.20)',
								inverse: '#ffffff'
							},
							light: {
								default: '#1F212A',
								active: '#1F212A',
								light: '#1F212A',
								clarity: 'rgba(31, 33, 42, 0.20)',
								inverse: '#9A9CAE'
							},
							secondary: {
								default: '#363843',
								active: '#464852',
								light: '#363843',
								clarity: 'rgba(54, 56, 67, 0.20)',
								inverse: '#9A9CAE'
							},
						}
					}
				}
			}
		}
	}
};

Box Shadows

Custom box shadows are set via theme.custom.base.boxShadows for both light and dark themes, extending Tailwind Box Shadow Colors .
tailwind.config.js HTML 
				
					module.exports = {
	theme: {
		extend: {
			base: {
				boxShadows: {
					light: {
						default: '0px 4px 12px 0px rgba(0, 0, 0, 0.09)',
						light: '0px 3px 4px 0px rgba(0, 0, 0, 0.03)',
						primary: '0px 4px 12px 0px rgba(40, 132, 239, 0.35)',
						success: '0px 4px 12px 0px rgba(53, 189, 100, 0.35)',
						danger: '0px 4px 12px 0px rgba(241, 65, 108, 0.35)',
						info: '0px 4px 12px 0px rgba(114, 57, 234, 0.35)',
						warning: '0px 4px 12px 0px rgba(246, 192, 0, 0.35)',
						dark: '0px 4px 12px 0px rgba(37, 47, 74, 0.35)'
					},
					dark: {
						default: 'none',
						light: 'none',
						primary: 'none',
						success: 'none',
						danger: 'none',
						info: 'none',
						warning: 'none',
						dark: 'none'
					}
				}
			}
		}
	}
};

Components

Metronic Tailwind provides extensive customization options for custom components through theme.custom.components . This feature allows to define specific styles and properties to ensure components align perfectly with the overall design system and meet project requirements. 
				
					module.exports = {
	theme: {
		custom: ({ theme }) => ({
			components: {
				common: {
					backgrounds: {
						light: {
							card: 'white',
							tooltip: theme('colors.coal')['400'],
							popover: 'white',
							modal: 'white',
							drawer: 'white',
							dropdown: 'white',
							backdrop: 'rgba(0, 0, 0, 0.80)',
							tableHead: 'var(--tw-light-active)'
						},
						dark: {
							card: theme('colors.coal')['300'],
							tooltip: theme('colors.coal')['600'],
							popover: theme('colors.coal')['600'],
							modal: theme('colors.coal')['600'],
							drawer: theme('colors.coal')['600'],
							dropdown: theme('colors.coal')['600'],
							backdrop: 'rgba(0, 0, 0, 0.80)',
							tableHead: theme('colors.coal')['200'],
						},
					},
					borders: {
						light: {
							card: '1px solid var(--tw-gray-200)',
							table: '1px solid var(--tw-gray-200)',
							dropdown: '1px solid var(--tw-gray-200)',
							popover: '1px solid var(--tw-gray-200)',
							tooltip: '0',
						},
						dark: {
							card: `1px solid ${theme('base.colors.gray.dark')['100']}`,
							table: `1px solid ${theme('base.colors.gray.dark')['100']}`,
							dropdown: `1px solid ${theme('base.colors.gray.dark')['100']}`,
							tooltip: `1px solid ${theme('base.colors.gray.dark')['100']}`,
							popover: `1px solid ${theme('base.colors.gray.dark')['100']}`
						}
					},
					boxShadows: {
						light: {
							card: '0px 3px 4px 0px rgba(0, 0, 0, 0.03)',
							tooltip: '0px 3px 4px 0px rgba(0, 0, 0, 0.03)',
							popover: '0px 3px 4px 0px rgba(0, 0, 0, 0.03)',
							modal: '0px 10px 14px 0px rgba(15, 42, 81, 0.03)',
							drawer: '0px 3px 4px 0px rgba(0, 0, 0, 0.03)',
							dropdown: '0px 7px 18px 0px rgba(0, 0, 0, 0.09)',
							input: '0px 0px 10px 0px rgba(0, 0, 0, 0.10)'
						},
						dark: {
							card: '0px 3px 4px 0px rgba(0, 0, 0, 0.03)',
							tooltip: '0px 3px 4px 0px rgba(0, 0, 0, 0.03)',
							popover: '0px 3px 4px 0px rgba(0, 0, 0, 0.03)',
							modal: '0px 10px 14px 0px rgba(15, 42, 81, 0.03)',
							drawer: '0px 3px 4px 0px rgba(0, 0, 0, 0.03)',
							dropdown: '0px 7px 18px 0px rgba(0, 0, 0, 0.09)',
							input: '0px 0px 10px 0px rgba(0, 0, 0, 0.10)'
						}
					},
					borderRadius: {
						btn: theme('borderRadius.md'),
						progress: theme('borderRadius.lg'),
						dropdown: theme('borderRadius.xl'),
						badge: theme('borderRadius.DEFAULT'),
						card: theme('borderRadius.xl'),
						tooltip: theme('borderRadius.lg'),
						popover: theme('borderRadius.lg'),
						modal: theme('borderRadius.xl')
					}
				},
				container: {
					fixed: {
						px: {
							DEFAULT: theme('spacing.6'),
							xl: theme('spacing.10'),
						},
						'max-width': theme('screens.xl')
					},
					fluid: {
						px: {
							DEFAULT: theme('spacing.6'),
							lg: theme('spacing.10')
						}
					}
				},
				btn: {
					xs: {
						height: '1.75rem',
						px: '0.5rem',
						py: '0.35rem',
						gap: '0.25rem',
						fontSize: theme('fontSize.2xs')[0],
						fontWeight: '500',
						iconFontSize: '0.75rem',
						onlyIconFontSize: '1rem'
					},
					sm: {
						height: '2rem',
						px: '0.75rem',
						py: '0.45rem',
						gap: '0.275rem',
						fontSize: theme('fontSize.xs')[0],
						fontWeight: '500',
						iconFontSize: '0.875rem',
						onlyIconFontSize: '1.125rem',
						tabsGap: '0.188rem'
					},
					DEFAULT: {
						height: '2.5rem',
						px: '1rem',
						py: '0.55rem',
						gap: '0.375rem',
						fontSize: theme('fontSize.2sm')[0],
						fontWeight: '500',
						iconFontSize: '1.125rem',
						onlyIconFontSize: '1.5rem',
						tabsGap: '0.25rem'
					},
					lg: {
						height: '3rem',
						px: '1.25rem',
						py: '0.75rem',
						gap: '0.5rem',
						fontSize: theme('fontSize.sm')[0],
						fontWeight: '500',
						iconFontSize: '1.25rem',
						onlyIconFontSize: '1.75rem',
						tabsGap: '0.313rem'
					},
				},
				input: {
					sm: {
						px: '0.625rem'
					},
					DEFAULT: {
						px: '0.75rem'
					},
					lg: {
						gap: '0.875rem'
					}
				},
				checkbox: {
					sm: {
						size: '1.125rem',
						borderRadius: '0.25rem'
					},
					DEFAULT: {
						size: '1.375rem',
						borderRadius: '0.375rem'
					},
					lg: {
						size: '1.625rem',
						borderRadius: '0.5rem'
					}
				},
				radio: {
					sm: {
						size: '1.125rem'
					},
					DEFAULT: {
						size: '1.375rem'
					},
					lg: {
						size: '1.625rem'
					},
				},
				switch: {
					sm: {
						height: '1.125rem',
						width: '1.875rem'
					},
					DEFAULT: {
						height: '1.375rem',
						width: '2.125rem'
					},
					lg: {
						height: '1.625rem',
						width: '2.375rem'
					},
				},
				card: {					
					px: theme('spacing')['7.5'],
					py: {
						header: theme('spacing.3'),
						body: theme('spacing.5'),
						footer: theme('spacing.3'),
						group: theme('spacing.3')
					},
					grid: {
						px: theme('spacing.5')
					}
				},
				table: {
					px: '1rem',
					py: {
						head: '0.625rem',
						body: '0.75rem'
					}
				}
			}
		})
	}
};

Layouts

Metronic Tailwind provides extensive customization options for custom layouts through theme.custom.layouts . This feature allows to define specific styles and properties to ensure layouts align perfectly with the overall design system and meet project requirements. 
				
					module.exports = {
	theme: {
		custom: ({ theme }) => ({
			layouts: {
				demo1: {
					sidebar: {
						width: {
							desktop: '280px',
							desktopCollapse: '80px',
							mobile: '280px'
						}
					},
					header: {
						height: {
							desktop: '70px',
							mobile: '60px'
						}
					}
				}
			}
		})
	}
};

Font Family

Set global font family via theme.extend.fontFamily property following the guidance from the Tailwind CSS Font Family documentation.
tailwind.config.js HTML 
				
					module.exports = {
	theme: {
		extend: {
			fontFamily: {
				sans: ['Inter', 'system-ui', 'sans-serif']
			}
		}
	}
};

Font Size

Set global font family via theme.extend.fontSize property following the guidance from the Tailwind CSS Font Size documentation.
Class Properties
text-4xs
font-size: 0.563rem; /* 9px */ line-height: 0.6875rem; /* 11px */
text-3xs
font-size: 0.6rem; /* 10px */ line-height: 0.75rem; /* 12px */
text-2xs
font-size: 0.6875rem; /* 11px */ line-height: 0.75rem; /* 12px */
text-2sm
font-size: 0.8125rem; /* 13px */ line-height: 1.125rem; /* 18px */
text-md
font-size: 0.9375rem; /* 15px */ line-height: 1.375rem; /* 22px */
text-1.5xl
font-size: 1.375rem; /* 22px */ line-height: 1.8125rem; /* 29px */
text-2.5xl
font-size: 1.625rem; /* 26px */ line-height: 2.125rem; /* 34px */
tailwind.config.js HTML 
				
					module.exports = {
	theme: {
		extend: {
			fontSize: {
				'4xs': [
					'0.563rem', 					// 9px
					{
						lineHeight: '0.6875rem' 	// 11px
					}
				],
				'3xs': [
					'0.6rem',						// 10px
					{						
						lineHeight: '0.75rem' 		// 12px
					}
				],
				'2xs': [
					'0.6875rem',					// 11px
					{						
						lineHeight: '0.75rem',		// 12px
					}
				],
				'2sm': [
					'0.8125rem',					// 13px
					{						
						lineHeight: '1.125rem' 	// 18px
					}
				],
				md: [
					'0.9375rem',					// 15px
					{						
						lineHeight: '1.375rem' 	// 22px
					}
				],
				'1.5xl': [
					'1.375rem',					// 22px
					{						
						lineHeight: '1.8125rem' 	// 29px
					}
				],
				'2.5xl': [
					'1.625rem',					// 26px
					{						
						lineHeight: '2.125rem' 	// 34px
					}
				]
			}
		}
	}
};

Colors

To extend the colors as guided in the Tailwind CSS Colors documentation, set custom colors for both light and dark themes using the theme.extend.colors property, referencing the color mapping already defined in theme.custom.colors .
tailwind.config.js HTML 
				
					module.exports = {
	theme: {
		extend: {
			colors: {
				gray: {
					100: 'var(--tw-gray-100)',
					200: 'var(--tw-gray-200)',
					300: 'var(--tw-gray-300)',
					400: 'var(--tw-gray-400)',
					500: 'var(--tw-gray-500)',
					600: 'var(--tw-gray-600)',
					700: 'var(--tw-gray-700)',
					800: 'var(--tw-gray-800)',
					900: 'var(--tw-gray-900)',
				},
				primary: {
					DEFAULT: 'var(--tw-primary)',
					active: 'var(--tw-primary-active)',
					light: 'var(--tw-primary-light)',
					clarity: 'var(--tw-primary-clarity)',
					inverse: 'var(--tw-primary-inverse)',
				},
				success: {
					DEFAULT: 'var(--tw-success)',
					active: 'var(--tw-success-active)',
					light: 'var(--tw-success-light)',
					clarity: 'var(--tw-success-clarity)',
					inverse: 'var(--tw-success-inverse)',
				},
				warning: {
					DEFAULT: 'var(--tw-warning)',
					active: 'var(--tw-warning-active)',
					light: 'var(--tw-warning-light)',
					clarity: 'var(--tw-warning-clarity)',
					inverse: 'var(--tw-warning-inverse)',
				},
				danger: {
					DEFAULT: 'var(--tw-danger)',
					active: 'var(--tw-danger-active)',
					light: 'var(--tw-danger-light)',
					clarity: 'var(--tw-danger-clarity)',
					inverse: 'var(--tw-danger-inverse)',
				},
				info: {
					DEFAULT: 'var(--tw-info)',
					active: 'var(--tw-info-active)',
					light: 'var(--tw-info-light)',
					clarity: 'var(--tw-info-clarity)',
					inverse: 'var(--tw-info-inverse)',
				},
				dark: {
					DEFAULT: 'var(--tw-dark)',
					active: 'var(--tw-dark-active)',
					light: 'var(--tw-dark-light)',
					clarity: 'var(--tw-dark-clarity)',
					inverse: 'var(--tw-dark-inverse)',
				},
				secondary: {
					DEFAULT: 'var(--tw-secondary)',
					active: 'var(--tw-secondary-active)',
					light: 'var(--tw-secondary-light)',
					clarity: 'var(--tw-secondary-clarity)',
					inverse: 'var(--tw-secondary-inverse)',
				},
				light: {
					DEFAULT: 'var(--tw-light)',
					active: 'var(--tw-light-active)',
					light: 'var(--tw-light-light)',
					clarity: 'var(--tw-light-clarity)',
					inverse: 'var(--tw-light-inverse)',
				},
				brand: {
					DEFAULT: 'var(--tw-brand)',
					active: 'var(--tw-brand-active)',
					light: 'var(--tw-brand-light)',
					clarity: 'var(--tw-brand-clarity)',
					inverse: 'var(--tw-brand-inverse)',
				},
				coal: {
					100: '#15171C',
					200: '#13141A',
					300: '#111217',
					400: '#0F1014',
					500: '#0D0E12',
					600: '#0B0C10',
					black: '#000000',
					clarity: 'rgba(24, 25, 31, 0.50)',
				}
			}
		}
	}
};

Line Height

Set global line height options via theme.extend.lineHeight property following the guidance from the Tailwind CSS Line Height documentation.
Class Properties
leading-0
line-height: 0; /* 0px */
leading-5.5
line-height: 1.375rem; /* 22px */
tailwind.config.js HTML 
				
					module.exports = {
	theme: {
		extend: {
			lineHeight: {
				0: '0', 			// 0px
				5.5: '1.375rem' 	// 22px
			}
		}
	}
};

Spacing

Set global spacing options via theme.extend.spacing property following the guidance from the Tailwind CSS Padding documentation. 
				
					module.exports = {
	theme: {
		extend: {
			spacing: {
				0.75: '0.1875rem', 	// 3px
				1.25: '0.3rem', 		// 5px
				1.75: '0.4375rem', 	// 7px
				2.25: '0.563rem',		// 9px
				2.75: '0.688rem',		// 11px
				4.5: '1.125rem', 		// 18px
				5.5: '1.375rem', 		// 22px
				6.5: '1.625rem', 		// 26px
				7.5: '1.875rem', 		// 30px
				12.5: '3.125rem' 		// 40px
			}
		}
	}
};

Box Shadow

Add custom shadow color options via theme.extend.boxShadow property following the guidance from the Tailwind CSS Box Shadow Color documentation.
tailwind.config.js HTML 
				
					module.exports = {
	theme: {
		extend: {
			boxShadow: {
				card: 'var(--tw-card-box-shadow)',
				default: 'var(--tw-default-box-shadow)',
				light: 'var(--tw-light-box-shadow)',
				primary: 'var(--tw-primary-box-shadow)',
				success: 'var(--tw-success-box-shadow)',
				danger: 'var(--tw-danger-box-shadow)',
				info: 'var(--tw-info-box-shadow)',
				warning: 'var(--tw-warning-box-shadow)',
				dark: 'var(--tw-dark-box-shadow)',
			}
		}
	}
};

Z-index

Add custom z-index options via theme.extend.zIndex property following the guidance from the Tailwind CSS Z-Index documentation.
tailwind.config.js HTML 
				
					module.exports = {
	theme: {
		extend: {
			zIndex: {
				1: '1',
				5: '5',
				15: '15',
				25: '25'
			}
		}
	}
};

Border Width

Add custom border width options via theme.extend.borderWidth property following the guidance from the Tailwind CSS Border Width documentation.
tailwind.config.js HTML 
				
					module.exports = {
	theme: {
		extend: {
			borderWidth: {
				3: '3px'
			}
		}
	}
};

Screens

Customize the screens breakpoints via theme.extend.screens property following the guidance from the Tailwind CSS Screens documentation. 
				
					module.exports = {
	theme: {
		extend: {
			screens: {
				sm: '640px',
				md: '768px',
				lg: '1024px',
				xl: '1280px',
				'2xl': '1536px'
			}
		}
	}
};
Previous JavaScript Next Dark Mode