tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
	theme: {
		extend: {
			colors: {
				'text': {
				50: 'hsl(253, 69%, 95%)',
				100: 'hsl(252, 69%, 90%)',
				200: 'hsl(253, 71%, 80%)',
				300: 'hsl(253, 70%, 70%)',
				400: 'hsl(253, 70%, 60%)',
				500: 'hsl(253, 70%, 50%)',
				600: 'hsl(253, 70%, 40%)',
				700: 'hsl(253, 70%, 30%)',
				800: 'hsl(253, 71%, 20%)',
				900: 'hsl(252, 69%, 10%)',
				950: 'hsl(253, 69%, 5%)',
				},
				'background': {
				50: 'hsl(254, 68%, 95%)',
				100: 'hsl(254, 69%, 90%)',
				200: 'hsl(255, 69%, 80%)',
				300: 'hsl(254, 69%, 70%)',
				400: 'hsl(254, 68%, 60%)',
				500: 'hsl(254, 68%, 50%)',
				600: 'hsl(254, 68%, 40%)',
				700: 'hsl(254, 69%, 30%)',
				800: 'hsl(255, 69%, 20%)',
				900: 'hsl(254, 69%, 10%)',
				950: 'hsl(254, 68%, 5%)',
				},
				'primary': {
				50: 'hsl(346, 68%, 95%)',
				100: 'hsl(345, 69%, 90%)',
				200: 'hsl(344, 69%, 80%)',
				300: 'hsl(344, 69%, 70%)',
				400: 'hsl(344, 68%, 60%)',
				500: 'hsl(344, 68%, 50%)',
				600: 'hsl(344, 68%, 40%)',
				700: 'hsl(344, 69%, 30%)',
				800: 'hsl(344, 69%, 20%)',
				900: 'hsl(345, 69%, 10%)',
				950: 'hsl(342, 68%, 5%)',
				},
				'secondary': {
				50: 'hsl(74, 68%, 95%)',
				100: 'hsl(74, 69%, 90%)',
				200: 'hsl(75, 69%, 80%)',
				300: 'hsl(74, 69%, 70%)',
				400: 'hsl(74, 68%, 60%)',
				500: 'hsl(74, 68%, 50%)',
				600: 'hsl(74, 68%, 40%)',
				700: 'hsl(74, 69%, 30%)',
				800: 'hsl(75, 69%, 20%)',
				900: 'hsl(74, 69%, 10%)',
				950: 'hsl(74, 68%, 5%)',
				},
				'accent': {
				50: 'hsl(162, 68%, 95%)',
				100: 'hsl(165, 69%, 90%)',
				200: 'hsl(164, 69%, 80%)',
				300: 'hsl(164, 69%, 70%)',
				400: 'hsl(164, 68%, 60%)',
				500: 'hsl(164, 68%, 50%)',
				600: 'hsl(164, 68%, 40%)',
				700: 'hsl(164, 69%, 30%)',
				800: 'hsl(164, 69%, 20%)',
				900: 'hsl(165, 69%, 10%)',
				950: 'hsl(166, 68%, 5%)',
				},
				},
				fontSize: {
					sm: '0.750rem',
					base: '1rem',
					xl: '1.333rem',
					'2xl': '1.777rem',
					'3xl': '2.369rem',
					'4xl': '3.158rem',
					'5xl': '4.210rem',
					},
					fontFamily: {
					heading: 'McLaren',
					body: 'McLaren',
					},
					fontWeight: {
					normal: '400',
					bold: '700',
					},
		},
	},
	plugins: [require("@tailwindcss/typography")],
}