tailwind.config.js

const defaultTheme = require("tailwindcss/defaultTheme")

module.exports = {
	dark: "class",
	experimental: {
		darkModeVariant: true,
		uniformColorPalette: true,
	},
	plugins: [
		require("@tailwindcss/ui"),
	],
	purge: [
		"./src/**/*.js",
	],
	theme: {
		extend: {
			borderRadius: {
				1: `${1 * 0.25}rem`,
				2: `${2 * 0.25}rem`,
				3: `${3 * 0.25}rem`,
				4: `${4 * 0.25}rem`,
				5: `${5 * 0.25}rem`,
				6: `${6 * 0.25}rem`,
			},
			boxShadow: {
				"px": defaultTheme.boxShadow.xs,
				"1": defaultTheme.boxShadow.sm,
				"2": defaultTheme.boxShadow.default,
				"3": defaultTheme.boxShadow.md,
				"4": defaultTheme.boxShadow.lg,
				"5": defaultTheme.boxShadow.xl,
				"6": defaultTheme.boxShadow["2xl"],
				"px-1": defaultTheme.boxShadow.xs + ", " + defaultTheme.boxShadow.sm,
				"px-2": defaultTheme.boxShadow.xs + ", " + defaultTheme.boxShadow.default,
				"px-3": defaultTheme.boxShadow.xs + ", " + defaultTheme.boxShadow.md,
				"px-4": defaultTheme.boxShadow.xs + ", " + defaultTheme.boxShadow.lg,
				"px-5": defaultTheme.boxShadow.xs + ", " + defaultTheme.boxShadow.xl,
				"px-6": defaultTheme.boxShadow.xs + ", " + defaultTheme.boxShadow["2xl"],
			},
			colors: {
				// html {
				//   --theme: hsl(270, 100%, 50%);
				//   --dark-theme: hsl(270, 100%, 43.75%);
				// }
				"theme": "#ec7211",
				"dark-theme": "#ec7211",
			},
			fontFamily: {
				sans: [
					...defaultTheme.fontFamily.sans.slice(0, 3),
					"Inter",
					...defaultTheme.fontFamily.sans.slice(3),
				],
			},
			opacity: {
				0: "0",
				6.25: "0.0625",
				12.5: "0.125",
				18.75: "0.1875",
				25: "0.25",
				75: "0.75",
				81.25: "0.8125",
				87.5: "0.875",
				93.75: "0.9375",
				100: "1",
			},
		},
		screens: {
			sm: (640) + "px",
			md: (768) + "px",
			lg: (24 + 1024 + 24) + "px",
			xl: (24 + 1280 + 24) + "px",
		},
	},
	variants: {
		boxShadow: ({ after }) => after(["dark"]),
		opacity: ({ after }) => after(["group-hover", "group-focus"]),
		scale: ({ after }) => after(["group-hover", "group-focus"]),
		textColor: ({ after }) => after(["group-hover", "group-focus"]),
	},
}