Metronic - Tailwind CSS Theming

Metronic leverages KtUI theme variables to manage the global appearance of components, ensuring a seamless and consistent look across both light and dark modes. You can easily customize colors to align with your project's branding by using the extensive Tailwind CSS color palette or defining your own custom colors in the Tailwind configuration or KtUI theme files. For detailed guidance, refer to the Tailwind Colors documentation.

styles.css config.ktui.css

				
					/* Tailwind core */
@import 'tailwindcss';

/* Tailwind scan sources */
@source '../../dist/assets/vendors/ktui/';

/* Theme configs */
@import "./config.ktui";

/* KtUI styles */
@import '../../node_modules/@keenthemes/ktui/styles.css';

/* Metronic components  */
@import "./components/index";

/* Demos */
@import "./demos/demo1.css";

				
					/**  Tailwind color references: https://tailwindcss.com/docs/colors  **/

/** Colors **/
:root {
  /** Base Colors **/
  --background: oklch(1 0 0); /* --color-white */
  --foreground: oklch(27.4% 0.006 286.033); /* --color-zinc-800 */
  --card: oklch(1 0 0); /* --color-white */
  --card-foreground: oklch(27.4% 0.006 286.033); /* --color-zinc-800 */
  --popover: oklch(1 0 0); /* --color-white */
  --popover-foreground: oklch(27.4% 0.006 286.033); /* --color-zinc-800 */
  --primary: #1379F0; /* custom color  */
  --primary-foreground: oklch(1 0 0); /* --color-white */
  --secondary: oklch(96.7% 0.003 264.542); /* --color-zinc-100 */
  --secondary-foreground: oklch(44.6% 0.03 256.802); /* --color-zinc-600 */
  --muted: oklch(96.7% 0.003 264.542); /* --color-zinc-100 */
  --muted-foreground: oklch(70.5% 0.015 286.067); /* --color-zinc-400 */
  --accent: oklch(96.7% 0.003 264.542); /* --color-zinc-100 */
  --accent-foreground: oklch(21% 0.006 285.885); /* --color-zinc-900 */
  --destructive: oklch(57.7% 0.245 27.325); /* --color-red-600 */
  --destructive-foreground: oklch(1 0 0); /* --color-white */
  --mono: oklch(14.1% 0.005 285.823); /* --color-zinc-950 */
  --mono-foreground: oklch(1 0 0);  /* --color-white */
  
  /** Base Styles **/
  --border: oklch(94% 0.004 286.32); /* between --color-zinc-100 and --color-zinc-200 */
  --input: oklch(92% 0.004 286.32); /* --color-zinc-200 */
  --ring: oklch(87.1% 0.006 286.286); /* --color-zinc-400 */
  --radius: 0.5rem;
}

.dark {
  /** Base Colors **/
  --background: oklch(14.1% 0.005 285.823); /* --color-zinc-950 */
  --foreground: oklch(98.5% 0 0); /* --color-zinc-50 */
  --card: oklch(14.1% 0.005 285.823); /* --color-zinc-950 */
  --card-foreground: oklch(98.5% 0 0); /* --color-zinc-50 */
  --popover: oklch(14.1% 0.005 285.823); /* --color-zinc-950 */
  --popover-foreground: oklch(98.5% 0 0); /* --color-zinc-50 */
  --primary: #1379F0; /* custom color  */
  --primary-foreground: oklch(1 0 0); /* --color-white */
  --secondary: oklch(27.4% 0.006 286.033); /* --color-zinc-800 */
  --secondary-foreground: oklch(70.5% 0.015 286.067); /* --color-zinc-400 */
  --muted: oklch(21% 0.006 285.885); /* --color-zinc-900 */
  --muted-foreground: oklch(55.2% 0.016 285.938); /* --color-zinc-500 */
  --accent: oklch(21% 0.006 285.885); /* --color-zinc-900 */
  --accent-foreground: oklch(98.5% 0 0); /* --color-zinc-50 */
  --destructive: oklch(57.7% 0.245 27.325); /* --color-red-600 */
  --destructive-foreground: oklch(1 0 0); /* --color-white */
  --mono: oklch(87.1% 0.006 286.286); /* --color-zinc-300 */
  --mono-foreground: oklch(0 0 0); /* --color-black */
  
  /** Base Styles **/
  --border: oklch(27.4% 0.006 286.033); /* --color-zinc-800 */
  --input: oklch(27.4% 0.006 286.033); /* --color-zinc-800 */
  --ring: oklch(27.4% 0.006 286.033); /* --color-zinc-600 */
}

/** Theme Setup **/
@theme inline {
  /** Base Colors **/
  --color-background: var(--background);
  --color-foreground: var(--foreground);

  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);

  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);

  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);

  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);

  --color-mono: var(--mono);
  --color-mono-foreground: var(--mono-foreground);

  /** Base Styles **/
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  --radius-xl: calc(var(--radius) + 4px);
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
}

/** Custom Font Size **/
@theme {
  --text-2sm: 0.8125rem;
  --text-2sm--line-height: calc(1.075 / 0.8125);

  --text-2xs: 0.6875rem;
  --text-2xs--line-height: calc(0.825 / 0.6875);
}

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-xs`	`font-size: 0.6875rem; /* 11px /` `line-height: 0.75rem; / 12px */`
`text-sm`	`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-transparent)',
					inverse: 'var(--tw-primary-inverse)',
				},
				success: {
					DEFAULT: 'var(--tw-success)',
					active: 'var(--tw-success-active)',
					light: 'var(--tw-success-light)',
					clarity: 'var(--tw-success-transparent)',
					inverse: 'var(--tw-success-inverse)',
				},
				warning: {
					DEFAULT: 'var(--tw-warning)',
					active: 'var(--tw-warning-active)',
					light: 'var(--tw-warning-light)',
					clarity: 'var(--tw-warning-transparent)',
					inverse: 'var(--tw-warning-inverse)',
				},
				danger: {
					DEFAULT: 'var(--tw-danger)',
					active: 'var(--tw-danger-active)',
					light: 'var(--tw-danger-light)',
					clarity: 'var(--tw-danger-transparent)',
					inverse: 'var(--tw-danger-inverse)',
				},
				info: {
					DEFAULT: 'var(--tw-info)',
					active: 'var(--tw-info-active)',
					light: 'var(--tw-info-light)',
					clarity: 'var(--tw-info-transparent)',
					inverse: 'var(--tw-info-inverse)',
				},
				dark: {
					DEFAULT: 'var(--tw-dark)',
					active: 'var(--tw-dark-active)',
					light: 'var(--tw-dark-light)',
					clarity: 'var(--tw-dark-transparent)',
					inverse: 'var(--tw-dark-inverse)',
				},
				secondary: {
					DEFAULT: 'var(--tw-secondary)',
					active: 'var(--tw-secondary-active)',
					light: 'var(--tw-secondary-light)',
					clarity: 'var(--tw-secondary-transparent)',
					inverse: 'var(--tw-secondary-inverse)',
				},
				light: {
					DEFAULT: 'var(--tw-light)',
					active: 'var(--tw-light-active)',
					light: 'var(--tw-light-light)',
					clarity: 'var(--tw-light-transparent)',
					inverse: 'var(--tw-light-inverse)',
				},
				brand: {
					DEFAULT: 'var(--tw-brand)',
					active: 'var(--tw-brand-active)',
					light: 'var(--tw-brand-light)',
					clarity: 'var(--tw-brand-transparent)',
					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-green-500-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
			}
		}
	}
};

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: {
				kt-card: 'var(--tw-kt-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'
			}
		}
	}
};

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

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

3rd-Party Plugins

Theming

Gray Colors

Font Family

Font Size

Colors

Line Height

Spacing

Box Shadow

Z-index

Border Width

Screens

On This Page