tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
const { createThemes } = require("tw-colors");
module.exports = {
	content: ["./pages/**/*.{html,js}", "./components/**/*.{html,js}", "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
	theme: {
		extend: {
			screens: {
				xs: "480px",
				md2: "860px",
				"3xl": "1680px",
			},
			animation: {
				spin_slow: "spin 3s linear infinite",
				marquee: "marquee 15s linear infinite",
			},
			keyframes: {
				marquee: {
					"0%": { transform: "translateX(101%)" },
					"100%": { transform: "translateX(-101%)" },
				},
			},
			backgroundSize: {
				"size-200_200": "200% 200%",
				"size-100_100": "100% 100%",
				"size-100_auto": "100% auto",
				"size-auto_100": "auto 100%",
				"size-auto_105": "auto 105%",
				"size-auto_110": "auto 110%",
				"size-auto_115": "auto 115%",
				"size-auto_120": "auto 120%",
				"size-auto_125": "auto 125%",
				"size-auto_150": "auto 150%",
			},
			backgroundPosition: {
				"pos-0": "0% 100%",
				"pos-100": "0% 0%",
			},
			aspectRatio: {
				"4/3": "4 / 3",
			},
			borderWidth: {
				3: "3px",
			},
			minHeight: {
				0: "0px",
				px: "1px",
				0.5: "0.125rem" /* 2px */,
				1: "0.25rem" /* 4px */,
				1.5: "0.375rem" /* 6px */,
				2: "0.5rem" /* 8px */,
				2.5: "0.625rem" /* 10px */,
				3: "0.75rem" /* 12px */,
				3.5: "0.875rem" /* 14px */,
				4: "1rem" /* 16px */,
				5: "1.25rem" /* 20px */,
				6: "1.5rem" /* 24px */,
				7: "1.75rem" /* 28px */,
				8: "2rem" /* 32px */,
				9: "2.25rem" /* 36px */,
				10: "2.5rem" /* 40px */,
				11: "2.75rem" /* 44px */,
				12: "3rem" /* 48px */,
				14: "3.5rem" /* 56px */,
				16: "4rem" /* 64px */,
				20: "5rem" /* 80px */,
				24: "6rem" /* 96px */,
				28: "7rem" /* 112px */,
				32: "8rem" /* 128px */,
				36: "9rem" /* 144px */,
				40: "10rem" /* 160px */,
				44: "11rem" /* 176px */,
				48: "12rem" /* 192px */,
				52: "13rem" /* 208px */,
				56: "14rem" /* 224px */,
				60: "15rem" /* 240px */,
				64: "16rem" /* 256px */,
				72: "18rem" /* 288px */,
				80: "20rem" /* 320px */,
				96: "24rem" /* 384px */,
			},
			dropShadow: {
				MQ: "0px 0px 2px black",
				"pixelArt-1": ["1px 0px 0px white", "0px -1px 0px white", "0px 1px 0px white", "-1px 0px 0px white"],
				"pixelArt-2": ["2px 0px 0px white", "0px -2px 0px white", "0px 2px 0px white", "-2px 0px 0px white"],
				"pixelArt-3": ["3px 0px 0px white", "0px -3px 0px white", "0px 3px 0px white", "-3px 0px 0px white"],
				"pixelArt-4": ["4px 0px 0px white", "0px -4px 0px white", "0px 4px 0px white", "-4px 0px 0px white"],
			},
			boxShadow: {
				vignette: ["inset 0px 0px 32px rgba(0,0,0,0.75)", "inset 0px 0px 8px rgba(0,0,0,1)"],
				vignette_light: ["inset 0px 0px 32px rgba(105,55,55,0.5)", "inset 0px 0px 8px rgba(105,55,55,0.75)"],
			},
		},
	},
	plugins: [
		createThemes({
			default: {
				MQ_dark: "#06060a",
				MQ_darkhover: "#13131f",
				MQ_darkblue: "#0f1119",
				MQ_red: "#EF5350",
				MQ_green: "#16a34a",
				MQ_blue: "#15171e",
				MQ_light: "#cbd5e1",
				MQ_lighter: "#e2e8f0",
			},
			stranded: {
				MQ_dark: "#06060a",
				MQ_darkhover: "#13131f",
				MQ_darkblue: "#0f1119",
				MQ_red: "#EF5350",
				MQ_green: "#16a34a",
				MQ_blue: "#15171e",
				MQ_light: "#cbd5e1",
				MQ_lighter: "#e2e8f0",
			},
			doge: {
				MQ_dark: "#0a2830",
				MQ_darkhover: "#213141",
				MQ_darkblue: "#50445c",
				MQ_red: "#fb445a",
				MQ_green: "#bfc86f",
				MQ_blue: "#243144",
				MQ_light: "#fffaff",
				MQ_lighter: "#fffdfe",
			},
		}),
		require("tailwind-scrollbar")({ nocompatible: true }),
	],
};