Metronic - Tailwind CSS Theming

The section


         theme.extend.base

of the


         tailwind.config.js

file sets custom


         color

and


         box-shadow

properties for both light and dark themes.

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'
						}
					}
				}
			}
		}
	}
};

				
					<div class="bg-gray-100 hover:bg-gray-200">
 <!-- -->
</div>

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'
							},
						}
					}
				}
			}
		}
	}
};

				
					<div class="bg-primary hover:primary-active text-primary-inverse">
 <!-- -->
</div>
<div class="bg-success text-success-inverse hover:bg-success-light hover:text-primary">
 <!-- -->
</div>
<button class="btn btn-primary">
 <!-- -->
</button>

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'
					}
				}
			}
		}
	}
};

				
					<div class="shadow-default">
 <!-- -->
</div>
<div class="shadow-success">
 <!-- -->
</div>
<div class="shadow-primary">
 <!-- -->
</div>

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'
					}
				}
			}
		})
	}
};

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'
						}
					}
				}
			}
		})
	}
};

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']
			}
		}
	}
};

				
					<!DOCTYPE html>
<html class="h-full" lang="en">
 <head>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
 </head>
 <body>
  <!-- -->
 </body>
</html>

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
					}
				]
			}
		}
	}
};

				
					<span class="text-3xs">
 <!-- -->
</span>
<span class="text-md">
 <!-- -->
</span>
<span class="text-1.5xl">
 <!-- -->
</span>

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)',
				}
			}
		}
	}
};

				
					<div class="bg-primary hover:primary-active text-primary-inverse">
 <!-- -->
</div>
<div class="bg-success text-success-inverse hover:bg-success-light hover:text-primary">
 <!-- -->
</div>

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
			}
		}
	}
};

				
					<span class="leading-0">
 <!-- -->
</span>
<span class="leading-5.5">
 <!-- -->
</span>

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
			}
		}
	}
};

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)',
			}
		}
	}
};

				
					<div class="shadow-success">
 <!-- -->
</div>
<div class="shadow-warning">
 <!-- -->
</div>
<div class="hover:shadow-primary">
 <!-- -->
</div>

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'
			}
		}
	}
};

				
					<div class="z-1">
 <!-- -->
</div>
<div class="z-5">
 <!-- -->
</div>

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'
			}
		}
	}
};

				
					<span class="border-3 border-success">
 <!-- -->
</span>
<span class="border-b-3 border-b-primary">
 <!-- -->
</span>

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'
			}
		}
	}
};

Getting Started

Customization

Base Components

Navigation

Forms

Plugins

Theming

Base

Gray Colors

Contextual Colors

Box Shadows

Components

Layouts

Font Family

Font Size

Colors

Line Height

Spacing

Box Shadow

Z-index

Border Width

Screens

On This Page