tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
	content: [
		"./app/**/*.{js,ts,jsx,tsx}",
		"./pages/**/*.{js,ts,jsx,tsx}",
		"./components/**/*.{js,ts,jsx,tsx}",

		// Or if using `src` directory:
		"./src/**/*.{js,ts,jsx,tsx}",
	],
	theme: {
		extend: {
			fontFamily: {
				"mono": ["var(--jetbrains-mono)"],
			},
			colors: {
				primary: {
					1: 'hsl(250, 20.0%, 10.2%)',
					2: 'hsl(255, 30.3%, 12.9%)',
					3: 'hsl(253, 37.0%, 18.4%)',
					4: 'hsl(252, 40.1%, 22.5%)',
					5: 'hsl(252, 42.2%, 26.2%)',
					6: 'hsl(251, 44.3%, 31.1%)',
					7: 'hsl(250, 46.8%, 38.9%)',
					8: 'hsl(250, 51.8%, 51.2%)',
					9: 'hsl(252, 56.0%, 57.5%)',
					10: 'hsl(251, 63.2%, 63.2%)',
					11: 'hsl(250, 95.0%, 76.8%)',
					12: 'hsl(252, 87.0%, 96.4%)',
				},
				gray: {
					1: '#161618',
					2: '#1c1c1f',
					3: '#232326',
					4: '#28282c',
					5: '#2e2e32',
					6: '#34343a',
					7: '#3e3e44',
					8: '#504f57',
					9: '#706f78',
					10: '#7e7d86',
					11: '#a09fa6',
					12: '#ededef',
				},
				red: {
					1: 'hsl(353, 23.0%, 9.8%)',
					2: 'hsl(357, 34.4%, 12.0%)',
					3: 'hsl(356, 43.4%, 16.4%)',
					4: 'hsl(356, 47.6%, 19.2%)',
					5: 'hsl(356, 51.1%, 21.9%)',
					6: 'hsl(356, 55.2%, 25.9%)',
					7: 'hsl(357, 60.2%, 31.8%)',
					8: 'hsl(358, 65.0%, 40.4%)',
					9: 'hsl(358, 75.0%, 59.0%)',
					10: 'hsl(358, 85.3%, 64.0%)',
					11: 'hsl(358, 100%, 69.5%)',
					12: 'hsl(351, 89.0%, 96.0%)',
				}
			},
		},
	},
	plugins: [],
};