tailwind.config.js

const twTypography = require("@tailwindcss/typography");

module.exports = {
	mode: "jit",
	content: [
		"./pages/**/*.{js,ts,jsx,tsx}",
		"./components/**/*.{js,ts,jsx,tsx}",
		"./libs/**/*.{js,ts,jsx,tsx}",
	],
	darkMode: "class",
	theme: {
		screens: {
			sm: "640px",
			md: "768px",
			lg: "1024px",
			xl: "1140px",
		},
		colors: {
			current: "currentColor",
			transparent: "transparent",
			black: "#000",
			white: "#fff",
			gray: {
				50: "#f9fafb",
				100: "#f3f4f6",
				200: "#e5e7eb",
				300: "#d1d5db",
				400: "#9ca3af",
				500: "#6b7280",
				600: "#4b5563",
				700: "#374151",
				800: "#1f2937",
				900: "#111827",
			},
			red: {
				50: "#fef2f2",
				100: "#fee2e2",
				200: "#fecaca",
				300: "#fca5a5",
				400: "#f87171",
				500: "#ef4444",
				600: "#dc2626",
				700: "#b91c1c",
				800: "#991b1b",
				900: "#7f1d1d",
			},
			yellow: {
				50: "#fffbeb",
				100: "#fef3c7",
				200: "#fde68a",
				300: "#fcd34d",
				400: "#fbbf24",
				500: "#f59e0b",
				600: "#d97706",
				700: "#b45309",
				800: "#92400e",
				900: "#78350f",
			},
			green: {
				50: "#ecfdf5",
				100: "#d1fae5",
				200: "#a7f3d0",
				300: "#6ee7b7",
				400: "#34d399",
				500: "#10b981",
				600: "#059669",
				700: "#047857",
				800: "#065f46",
				900: "#064e3b",
			},
			blue: {
				50: "#eff6ff",
				100: "#dbeafe",
				200: "#bfdbfe",
				300: "#93c5fd",
				400: "#60a5fa",
				500: "#3b82f6",
				600: "#2563eb",
				700: "#1d4ed8",
				800: "#1e40af",
				900: "#1e3a8a",
			},
			indigo: {
				50: "#eef2ff",
				100: "#e0e7ff",
				200: "#c3dafe",
				300: "#a5b4fc",
				400: "#818cf8",
				500: "#6366f1",
				600: "#4f46e5",
				700: "#4338ca",
				800: "#3730a3",
				900: "#312e81",
			},
			purple: {
				50: "#f5f3ff",
				100: "#ede9fe",
				200: "#ddd6fe",
				300: "#c4b5fd",
				400: "#a78bfa",
				500: "#8b5cf6",
				600: "#7c3aed",
				700: "#6d28d9",
				800: "#5b21b6",
				900: "#4c1d95",
			},
			pink: {
				50: "#fdf2f8",
				100: "#fce7f3",
				200: "#fbcfe8",
				300: "#f9a8d4",
				400: "#f472b6",
				500: "#ec4899",
				600: "#db2777",
				700: "#be185d",
				800: "#9d174d",
				900: "#831843",
			},
		},
		spacing: {
			px: "1px",
			px: "1px",
			0: "0px",
			0.5: "0.125rem",
			1: "0.25rem",
			1.5: "0.375rem",
			2: "0.5rem",
			2.5: "0.625rem",
			3: "0.75rem",
			3.5: "0.875rem",
			4: "1rem",
			5: "1.25rem",
			6: "1.5rem",
			7: "1.75rem",
			8: "2rem",
			9: "2.25rem",
			10: "2.5rem",
			11: "2.75rem",
			12: "3rem",
			14: "3.5rem",
			16: "4rem",
			20: "5rem",
			24: "6rem",
			32: "8rem",
			36: "9rem",
			40: "10rem",
			44: "11rem",
			48: "12rem",
			52: "13rem",
			56: "14rem",
			60: "15rem",
			64: "16rem",
			72: "18rem",
			80: "20rem",
			96: "24rem",
			128: "32rem",
			160: "40rem",
			192: "48rem",
		},
		backgroundColor: (theme) => ({
			...theme("colors"),
			body: "#fff",
		}),
		backgroundPosition: {
			bottom: "bottom",
			center: "center",
			left: "left",
			"left-bottom": "left bottom",
			"left-top": "left top",
			right: "right",
			"right-bottom": "right bottom",
			"right-top": "right top",
			top: "top",
		},
		backgroundSize: {
			auto: "auto",
			cover: "cover",
			contain: "contain",
		},
		borderColor: (theme) => ({
			...theme("colors"),
			DEFAULT: "#e5e7eb",
		}),
		borderRadius: {
			none: "0",
			sm: "0.125rem",
			DEFAULT: "6px",
			lg: "0.5rem",
			xl: "0.75rem",
			"2xl": "1rem",
			"3xl": "1.5rem",
			"4xl": "2rem",
			"6xl": "3rem",
			"12xl": "6rem",
			full: "9999px",
		},
		borderWidth: {
			DEFAULT: "1px",
			0: "0",
			2: "2px",
			4: "4px",
			8: "8px",
		},
		boxShadow: {
			sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
			DEFAULT:
				"0px 1px 2px rgba(148, 163, 184, 0.35), 0px 6px 6px rgba(203, 213, 225, 0.15)",
			md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
			lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
			xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
			"2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
			inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
			none: "none",
		},
		container: {},
		cursor: {
			auto: "auto",
			DEFAULT: "default",
			pointer: "pointer",
			wait: "wait",
			text: "text",
			move: "move",
			"not-allowed": "not-allowed",
		},
		fill: {
			current: "currentColor",
		},
		flex: {
			1: "1 1 0%",
			auto: "1 1 auto",
			initial: "0 1 auto",
			none: "none",
		},
		flexGrow: {
			0: "0",
			DEFAULT: "1",
		},
		flexShrink: {
			0: "0",
			DEFAULT: "1",
		},
		fontFamily: {
			body: '"DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
			heading:
				'"DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
			sans: '"DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
			serif: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
			mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
		},
		fontSize: {
			xs: "0.75rem",
			sm: "0.875rem",
			base: "1rem",
			lg: "1.125rem",
			xl: "1.25rem",
			"2xl": "1.5rem",
			"3xl": "1.875rem",
			"4xl": "2.25rem",
			"5xl": "3rem",
			"6xl": "3.75rem",
			"7xl": "4.5rem",
			"8xl": "6rem",
			"9xl": "8rem",
		},
		fontWeight: {
			hairline: "100",
			thin: "200",
			light: "300",
			normal: "400",
			medium: "500",
			semibold: "600",
			bold: "700",
			extrabold: "800",
			black: "900",
		},
		height: (theme) => ({
			auto: "auto",
			...theme("spacing"),
			full: "100%",
			screen: "100vh",
		}),
		inset: {
			0: "0",
			auto: "auto",
			"1/2": "50%",
		},
		letterSpacing: {
			tighter: "-0.05em",
			tight: "-0.025em",
			normal: "0",
			wide: "0.025em",
			wider: "0.05em",
			widest: "0.1em",
		},
		lineHeight: {
			none: "1",
			tight: "1.25",
			snug: "1.375",
			normal: "1.5",
			relaxed: "1.625",
			loose: "2",
		},
		listStyleType: {
			none: "none",
			disc: "disc",
			decimal: "decimal",
		},
		margin: (theme, { negative }) => ({
			auto: "auto",
			...theme("spacing"),
			...negative(theme("spacing")),
			"for-radius": "5.4rem",
		}),
		maxHeight: {
			full: "100%",
			screen: "100vh",
		},
		maxWidth: {
			none: "none",
			xs: "20rem",
			sm: "24rem",
			md: "28rem",
			lg: "32rem",
			xl: "36rem",
			"2xl": "42rem",
			"3xl": "48rem",
			"4xl": "56rem",
			"5xl": "64rem",
			"6xl": "72rem",
			"7xl": "80rem",
			full: "100%",
			min: "min-content",
			max: "max-content",
			prose: "65ch",
		},
		minHeight: {
			0: "0",
			full: "100%",
			screen: "100vh",
		},
		minWidth: {
			0: "0",
			full: "100%",
		},
		objectPosition: {
			bottom: "bottom",
			center: "center",
			left: "left",
			"left-bottom": "left bottom",
			"left-top": "left top",
			right: "right",
			"right-bottom": "right bottom",
			"right-top": "right top",
			top: "top",
		},
		opacity: {
			0: "0",
			5: "0.05",
			10: "0.1",
			20: "0.2",
			25: "0.25",
			30: "0.3",
			40: "0.4",
			50: "0.5",
			60: "0.6",
			70: "0.7",
			75: "0.75",
			80: "0.8",
			90: "0.8",
			95: "0.95",
			100: "1",
		},
		order: {
			first: "-9999",
			last: "9999",
			none: "0",
			1: "1",
			2: "2",
			3: "3",
			4: "4",
			5: "5",
			6: "6",
			7: "7",
			8: "8",
			9: "9",
			10: "10",
			11: "11",
			12: "12",
		},
		padding: (theme) => theme("spacing"),
		placeholderColor: (theme) => theme("colors"),
		stroke: {
			current: "currentColor",
		},
		textColor: (theme) => ({
			...theme("colors"),
			body: "#111827",
		}),
		width: (theme) => ({
			auto: "auto",
			...theme("spacing"),
			"1/2": "50%",
			"1/3": "33.333333%",
			"2/3": "66.666667%",
			"1/4": "25%",
			"2/4": "50%",
			"3/4": "75%",
			"1/5": "20%",
			"2/5": "40%",
			"3/5": "60%",
			"4/5": "80%",
			"1/6": "16.666667%",
			"2/6": "33.333333%",
			"3/6": "50%",
			"4/6": "66.666667%",
			"5/6": "83.333333%",
			"1/12": "8.333333%",
			"2/12": "16.666667%",
			"3/12": "25%",
			"4/12": "33.333333%",
			"5/12": "41.666667%",
			"6/12": "50%",
			"7/12": "58.333333%",
			"8/12": "66.666667%",
			"9/12": "75%",
			"10/12": "83.333333%",
			"11/12": "91.666667%",
			full: "100%",
			screen: "100vw",
		}),
		zIndex: {
			auto: "auto",
			0: "0",
			10: "10",
			20: "20",
			30: "30",
			40: "40",
			50: "50",
		},
	},
	variants: {
		accessibility: ["responsive", "focus-within", "focus"],
		alignContent: ["responsive"],
		alignItems: ["responsive"],
		alignSelf: ["responsive"],
		animation: ["responsive"],
		appearance: ["responsive"],
		backgroundAttachment: ["responsive"],
		backgroundClip: ["responsive"],
		backgroundColor: [
			"responsive",
			"dark",
			"group-hover",
			"focus-within",
			"hover",
			"focus",
		],
		backgroundImage: ["responsive"],
		backgroundOpacity: [
			"responsive",
			"group-hover",
			"focus-within",
			"hover",
			"focus",
		],
		backgroundPosition: ["responsive"],
		backgroundRepeat: ["responsive"],
		backgroundSize: ["responsive"],
		borderCollapse: ["responsive"],
		borderColor: [
			"responsive",
			"dark",
			"group-hover",
			"focus-within",
			"hover",
			"focus",
		],
		borderOpacity: [
			"responsive",
			"group-hover",
			"focus-within",
			"hover",
			"focus",
		],
		borderRadius: ["responsive"],
		borderStyle: ["responsive"],
		borderWidth: ["responsive"],
		boxShadow: [
			"responsive",
			"group-hover",
			"focus-within",
			"hover",
			"focus",
		],
		boxSizing: ["responsive"],
		clear: ["responsive"],
		container: ["responsive"],
		cursor: ["responsive"],
		display: ["responsive"],
		divideColor: ["responsive", "dark"],
		divideOpacity: ["responsive"],
		divideStyle: ["responsive"],
		divideWidth: ["responsive"],
		fill: ["responsive"],
		flex: ["responsive"],
		flexDirection: ["responsive"],
		flexGrow: ["responsive"],
		flexShrink: ["responsive"],
		flexWrap: ["responsive"],
		float: ["responsive"],
		fontFamily: ["responsive"],
		fontSize: ["responsive"],
		fontSmoothing: ["responsive"],
		fontStyle: ["responsive"],
		fontVariantNumeric: ["responsive"],
		fontWeight: ["responsive"],
		gap: ["responsive"],
		gradientColorStops: ["responsive", "dark", "hover", "focus"],
		gridAutoColumns: ["responsive"],
		gridAutoFlow: ["responsive"],
		gridAutoRows: ["responsive"],
		gridColumn: ["responsive"],
		gridColumnEnd: ["responsive"],
		gridColumnStart: ["responsive"],
		gridRow: ["responsive"],
		gridRowEnd: ["responsive"],
		gridRowStart: ["responsive"],
		gridTemplateColumns: ["responsive"],
		gridTemplateRows: ["responsive"],
		height: ["responsive"],
		inset: ["responsive"],
		justifyContent: ["responsive"],
		justifyItems: ["responsive"],
		justifySelf: ["responsive"],
		letterSpacing: ["responsive"],
		lineHeight: ["responsive"],
		listStylePosition: ["responsive"],
		listStyleType: ["responsive"],
		margin: ["responsive"],
		maxHeight: ["responsive"],
		maxWidth: ["responsive"],
		minHeight: ["responsive"],
		minWidth: ["responsive"],
		objectFit: ["responsive"],
		objectPosition: ["responsive"],
		opacity: [
			"responsive",
			"group-hover",
			"focus-within",
			"hover",
			"focus",
		],
		order: ["responsive"],
		outline: ["responsive", "focus-within", "focus"],
		overflow: ["responsive"],
		overscrollBehavior: ["responsive"],
		padding: ["responsive"],
		placeContent: ["responsive"],
		placeItems: ["responsive"],
		placeSelf: ["responsive"],
		placeholderColor: ["responsive", "dark", "focus"],
		placeholderOpacity: ["responsive", "focus"],
		pointerEvents: ["responsive"],
		position: ["responsive"],
		resize: ["responsive"],
		ringColor: ["responsive", "dark", "focus-within", "focus"],
		ringOffsetColor: ["responsive", "dark", "focus-within", "focus"],
		ringOffsetWidth: ["responsive", "focus-within", "focus"],
		ringOpacity: ["responsive", "focus-within", "focus"],
		ringWidth: ["responsive", "focus-within", "focus"],
		rotate: ["responsive", "hover", "focus"],
		scale: ["responsive", "hover", "focus"],
		skew: ["responsive", "hover", "focus"],
		space: ["responsive"],
		stroke: ["responsive"],
		strokeWidth: ["responsive"],
		tableLayout: ["responsive"],
		textAlign: ["responsive"],
		textColor: [
			"responsive",
			"dark",
			"group-hover",
			"focus-within",
			"hover",
			"focus",
		],
		textDecoration: [
			"responsive",
			"group-hover",
			"focus-within",
			"hover",
			"focus",
		],
		textOpacity: [
			"responsive",
			"group-hover",
			"focus-within",
			"hover",
			"focus",
		],
		textOverflow: ["responsive"],
		textTransform: ["responsive"],
		transform: ["responsive"],
		transformOrigin: ["responsive"],
		transitionDelay: ["responsive"],
		transitionDuration: ["responsive"],
		transitionProperty: ["responsive"],
		transitionTimingFunction: ["responsive"],
		translate: ["responsive", "hover", "focus"],
		userSelect: ["responsive"],
		verticalAlign: ["responsive"],
		visibility: ["responsive"],
		whitespace: ["responsive"],
		width: ["responsive"],
		wordBreak: ["responsive"],
		zIndex: ["responsive", "focus-within", "focus"],
	},
	corePlugins: {},
	plugins: [twTypography],
};