tailwind.config.js

const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
	theme: {
		container: {
			center: true,
		},
		screens: {
			sm: "640px",
			md: "768px",
			lg: "1024px",
			xl: "1280px",
			"2xl": "1536px",
			"3xl": "2560px",
			"4xl": "3600px",
		},
		extend: {
			fontFamily: {
				sans: [
					"Helvetica Neue",
					"Ubuntu Sans",
					...defaultTheme.fontFamily.sans,
				],
			},
			colors: {
				background: "var(--background)",
				accent: "var(--accent)",
				cards: "var(--cards)",
				foreground: "var(--fg)",
				sforeground: "var(--sfg)",
				imggradient: "var(--imgcol)",
				darkbackground: "var(--darkbackground)",
				darkaccent: "var(--darkaccent)",
				darkcards: "var(--darkcards)",
				darkforeground: "var(--darkfg)",
				darksforeground: "var(--darksfg)",
				darkimggradient: "var(--darkimgcol)",
			},
		},
	},
	content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
	darkMode: "class",
	variants: {
		extend: {
			display: ["group-hover"],
		},
	},
	plugins: [],
};