This is the latest docs update, but there are missing components, blocks and some of the styles doesn't work. If you wish to see the complete version, you can check it out at old docs.

Installation

Manual Installation

Install Tailwind.CSS

This is just a basic setup. For complete installation instructions, please refer to the Tailwind CSS installation docs.

Terminal
  npm install -D tailwindcss
  npx tailwindcss init

Add Css Variables

These are the default themes provided by mijn-ui. If you would like to create your own theme, learn more about themes here.

global.css
@layer base {
	:root {
		--background: 0 0 100%;
		--background-alt: 0 0 100%;
		--foreground: 240 10% 4%;
		--border: 240 5% 84%;
 
		--muted: 240 6% 90%;
		--muted-alt: 240 6% 90%;
		--muted-foreground: 240 4% 46%;
		--border-muted: 240 5% 96%;
 
		--inverse: 240 10% 4%;
		--inverse-foreground: 0 0 98%;
		--border-inverse: 240 5% 26%;
 
		--primary: 21 90% 48%;
		--primary-foreground: 20 100% 96%;
		--primary-subtle: 20 100% 92%;
		--primary-foreground-subtle: 20 75% 28%;
		--primary-emphasis: 20 88% 40%;
		--border-primary: 20 88% 40%;
		--border-primary-subtle: 21 98% 83%;
 
		--secondary: 240 5% 96%;
		--secondary-foreground: 240 5% 26%;
		--border-secondary: 240 6% 90%;
 
		--success: 142 76% 36%;
		--success-foreground: 143 76% 97%;
		--success-subtle: 143 84% 93%;
		--success-foreground-subtle: 142 61% 20%;
		--success-emphasis: 142 72% 29%;
		--border-success: 142 72% 29%;
		--border-success-subtle: 142 79% 85%;
 
		--warning: 41 96% 40%;
		--warning-foreground: 41 92% 95%;
		--warning-subtle: 41 97% 88%;
		--warning-foreground-subtle: 40 73% 26%;
		--warning-emphasis: 41 92% 33%;
		--border-warning: 41 92% 33%;
		--border-warning-subtle: 41 98% 77%;
 
		--danger: 0 72% 51%;
		--danger-foreground: 0 86% 97%;
		--danger-subtle: 0 93% 94%;
		--danger-foreground-subtle: 0 63% 31%;
		--danger-emphasis: 0 74% 42%;
		--border-danger: 0 74% 42%;
		--border-danger-subtle: 0 96% 89%;
 
		--radius-2xs: 0.125rem; /* 2px */
		--radius-xs: 0.25rem; /* 4px */
		--radius-sm: 0.375rem; /* 6px */
		--radius-base: 0.5rem; /* 8px */
		--radius-lg: 0.75rem; /* 12px */
		--radius-xl: 1rem; /* 16px */
		--radius-2xl: 1.25rem; /* 20px */
		--radius-full: 9999px;
 
		--shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
		--shadow-sm:
			0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
		--shadow-md:
			0 4px 8px rgba(16, 24, 40, 0.1), 0 2px 4px rgba(16, 24, 40, 0.06);
		--shadow-lg:
			0 12px 16px rgba(16, 24, 40, 0.08), 0 4px 6px rgba(16, 24, 40, 0.03);
		--shadow-xl:
			0 20px 24px rgba(16, 24, 40, 0.08), 0 8px 8px rgba(16, 24, 40, 0.03);
		--shadow-2xl: 0 24px 48px rgba(16, 24, 40, 0.18);
		--shadow-3xl: 0 32px 64px rgba(16, 24, 40, 0.14);
	}
 
	.dark {
		--background: 240 10% 4%;
		--background-alt: 240 4% 16%;
		--foreground: 0 0 100%;
		--border: 240 5% 26%;
 
		--muted: 240 4% 16%;
		--muted-alt: 240 10% 4%;
		--muted-foreground: 240 4% 46%;
		--border-muted: 240 6% 10%;
 
		--inverse: 0 0 100%;
		--inverse-foreground: 240 10% 4%;
		--border-inverse: 240 5% 84%;
 
		--primary: 20 96% 61%;
		--primary-foreground: 21 81% 15%;
		--primary-subtle: 20 75% 28%;
		--primary-foreground-subtle: 20 100% 92%;
		--primary-emphasis: 20 96% 61%;
		--border-primary: 20 96% 61%;
		--border-primary-subtle: 21 79% 34%;
 
		--secondary: 240 6% 10%;
		--secondary-foreground: 240 5% 84%;
		--border-secondary: 240 4% 16%;
 
		--success: 142 69% 58%;
		--success-foreground: 142 80% 10%;
		--success-subtle: 142 61% 20%;
		--success-foreground-subtle: 143 84% 93%;
		--success-emphasis: 142 69% 58%;
		--border-success: 142 69% 58%;
		--border-success-subtle: 142 64% 24%;
 
		--warning: 41 96% 53%;
		--warning-foreground: 41 83% 14%;
		--warning-subtle: 40 73% 26%;
		--warning-foreground-subtle: 41 97% 88%;
		--warning-emphasis: 41 96% 53%;
		--border-warning: 41 96% 53%;
		--border-warning-subtle: 41 81% 29%;
 
		--danger: 0 91% 71%;
		--danger-foreground: 0 75% 15%;
		--danger-subtle: 0 63% 31%;
		--danger-foreground-subtle: 0 93% 94%;
		--danger-emphasis: 0 91% 71%;
		--border-danger: 0 91% 71%;
		--border-danger-subtle: 0 70% 35%;
	}
 
	* {
		border-color: hsl(var(--border));
	}
 
	body {
		background-color: hsl(var(--background));
		color: hsl(var(--foreground));
		font-family: "Inter", sans-serif;
	}
}

Add TailwindCss config

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
	darkMode: "class",
	content: [...], // Add your component entry here.
	theme: {
		extend: {
			borderRadius: {
				"2xs": "var(--radius-2xs)",
				xs: "var(--radius-xs)",
				sm: "var(--radius-sm)",
				md: "var(--radius-base)",
				lg: "var(--radius-lg)",
				xl: "var(--radius-xl)",
				"2xl": "var(--radius-2xl)",
				full: "var(--radius-full)",
			},
			boxShadow: {
				xs: "var(--shadow-xs)",
				sm: "var(--shadow-sm)",
				md: "var(--shadow-md)",
				lg: "var(--shadow-lg)",
				xl: "var(--shadow-xl)",
				"2xl": "var(--shadow-2xl)",
				"3xl": "var(--shadow-3xl)",
			},
			colors: {
				background: "hsl(var(--background))",
				"background-alt": "hsl(var(--background-alt))",
				foreground: "hsl(var(--foreground))",
				border: "hsl(var(--border))",
 
				secondary: "hsl(var(--secondary))",
				"secondary-foreground": "hsl(var(--secondary-foreground))",
				"border-secondary": "hsl(var(--border-secondary))",
 
				muted: "hsl(var(--muted))",
				"muted-alt": "hsl(var(--muted-alt))",
				"muted-foreground": "hsl(var(--muted-foreground))",
				"border-muted": "hsl(var(--border-muted))",
 
				inverse: "hsl(var(--inverse))",
				"inverse-foreground": "hsl(var(--inverse-foreground))",
				"border-inverse": "hsl(var(--border-inverse))",
 
				primary: "hsl(var(--primary))",
				"primary-subtle": "hsl(var(--primary-subtle))",
				"primary-foreground": "hsl(var(--primary-foreground))",
				"primary-foreground-subtle": "hsl(var(--primary-foreground-subtle))",
				"primary-emphasis": "hsl(var(--primary-emphasis))",
				"border-primary": "hsl(var(--border-primary))",
				"border-primary-subtle": "hsl(var(--border-primary-subtle))",
 
				success: "hsl(var(--success))",
				"success-subtle": "hsl(var(--success-subtle))",
				"success-foreground": "hsl(var(--success-foreground))",
				"success-foreground-subtle": "hsl(var(--success-foreground-subtle))",
				"success-emphasis": "hsl(var(--success-emphasis))",
				"border-success": "hsl(var(--border-success))",
				"border-success-subtle": "hsl(var(--border-success-subtle))",
 
				"warning-foreground": "hsl(var(--warning-foreground))",
				"warning-foreground-subtle": "hsl(var(--warning-foreground-subtle))",
				"warning-emphasis": "hsl(var(--warning-emphasis))",
				warning: "hsl(var(--warning))",
				"warning-subtle": "hsl(var(--warning-subtle))",
				"border-warning": "hsl(var(--border-warning))",
				"border-warning-subtle": "hsl(var(--border-warning-subtle))",
 
				danger: "hsl(var(--danger))",
				"danger-subtle": "hsl(var(--danger-subtle))",
				"danger-foreground": "hsl(var(--danger-foreground))",
				"danger-foreground-subtle": "hsl(var(--danger-foreground-subtle))",
				"danger-emphasis": "hsl(var(--danger-emphasis))",
				"border-danger": "hsl(var(--border-danger))",
				"border-danger-subtle": "hsl(var(--border-danger-subtle))",
			},
		},
	},
	plugins: [],
};

That's it

You can now start adding components to your project. Check out the components section to learn more about the available components.

Previous

Introduction

Next

Theming

On this page