tailwind.config.cjs

const pxToRem = (px, base = 16) => `${px / base}rem`;
module.exports = {
	content: ["./src/**/*.{html,js,svelte,ts,scss}"],
	darkMode: "class",
	theme: {
		container: {
			center: true,
			padding: {
				DEFAULT: "1.5rem",
				md: "0rem",
				lg: "0rem",
				xl: "0rem",
				"2xl": "0rem"
			}
		},
		extend: {
			colors: {
				blue: {
					100: "#C7F4F4",
					200: "#96D5F6",
					300: "#64A9D1",
					400: "#2D7AA0",
					500: "#004E71",
					600: "#002645"
				},
				green: {
					100: "#DBE4DA",
					200: "#C3D5C2",
					300: "#3CB878",
					400: "#00874C",
					500: "#005923",
					600: "#002E00"
				},
				grey: {
					100: "#E0E0E0",
					200: "#9E9E9E",
					300: "#616161",
					400: "#424242",
					500: "#212121",
					600: "#000000"
				}
			},
			fontSize: {
				12: pxToRem(12),
				13: pxToRem(13),
				14: pxToRem(14),
				15: pxToRem(15),
				16: pxToRem(16),
				18: pxToRem(18),
				20: pxToRem(20),
				22: pxToRem(22),
				24: pxToRem(24),
				28: pxToRem(28),
				32: pxToRem(32),
				36: pxToRem(36),
				40: pxToRem(40),
				48: pxToRem(48),
				54: pxToRem(54),
				56: pxToRem(56),
				64: pxToRem(64)
			},
			lineHeight: {
				100: "100%",
				110: "110%",
				120: "120%",
				125: "125%",
				130: "130%",
				140: "140%",
				150: "150%",
				160: "160%"
			},
			letterSpacing: {
				0.02: "0.02em",
				0.04: "0.04em",
				0.08: "0.08em"
			}
		}
	},
	variants: {
		extend: {
			backgroundColor: ["odd", "even"],
			margin: ["last"],
			padding: ["last, first"]
		}
	},
	plugins: []
};