tailwind.config.cjs

/** @type {import('tailwindcss').Config}*/
const config = {
	content: [
		'./src/**/*.{html,js,svelte,ts}',
		'./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}',
	],

	plugins: [require('flowbite/plugin')],

	darkMode: 'class',

	theme: {
		screens: {
			sm: '640px',
			md: '768px',
			lg: '1024px',
			xl: '1280px',
		},
		container: {
			center: true,
			padding: '0.75rem',
		},
		extend: {
			colors: {
				// blue
				primary: {
					50: '#eff6ff',
					100: '#dbeafe',
					200: '#bfdbfe',
					300: '#93c5fd',
					400: '#60a5fa',
					500: '#3b82f6',
					600: '#2563eb',
					700: '#1d4ed8',
					800: '#1e40af',
					900: '#1e3a8a',
				},
			},
		},
	},

	safelist: [
		{ pattern: /text-(blue|green|gray|red|yellow)-800/ },
		{ pattern: /bg-(blue|green|gray|red|yellow)-100/, variants: ['hover'] },
	],
};

module.exports = config;