tailwind.config.cjs

function withOpacity(variableName) {
	return ({ opacityValue }) => {
		if (opacityValue !== undefined) {
			return `rgba(var(${variableName}), ${opacityValue})`;
		}
		return `rgb(var(${variableName}))`;
	};
}

/** @type {import('tailwindcss').Config} */
module.exports = {
	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
	theme: {
		// Remove the following screen breakpoint or add other breakpoints
		// if one breakpoint is not enough for you
		screens: {
			sm: '640px',
			md: '768px',
			lg: '1024px',
			xl: '1280px',
		},

		extend: {
			textColor: {
				skin: {
					base: withOpacity('--color-text-base'),
					accent: withOpacity('--color-accent'),
					inverted: withOpacity('--color-fill'),
				},
			},
			backgroundColor: {
				skin: {
					fill: withOpacity('--color-fill'),
					accent: withOpacity('--color-accent'),
					inverted: withOpacity('--color-text-base'),
					card: withOpacity('--color-card'),
					'card-muted': withOpacity('--color-card-muted'),
				},
			},
			outlineColor: {
				skin: {
					fill: withOpacity('--color-accent'),
				},
			},
			borderColor: {
				skin: {
					line: withOpacity('--color-border'),
					fill: withOpacity('--color-text-base'),
					accent: withOpacity('--color-accent'),
				},
			},
			fill: {
				skin: {
					base: withOpacity('--color-text-base'),
					accent: withOpacity('--color-accent'),
				},
				transparent: 'transparent',
			},
			fontFamily: {
				mono: ['IBM Plex Mono', 'monospace'],
			},
			keyframes: {
				'marquee-left': {
					from: { transform: 'translateX(0)' },
					to: { transform: 'translateX(calc(-100% - var(--gap)))' },
				},
				'marquee-up': {
					from: { transform: 'translateY(0)' },
					to: { transform: 'translateY(calc(-100% - var(--gap)))' },
				},
			},
			animation: {
				'marquee-left': 'marquee-left var(--duration, 30s) linear infinite',
				'marquee-up': 'marquee-up var(--duration, 30s) linear infinite',
			},
			typography: {
				DEFAULT: {
					css: {
						pre: {
							color: false,
						},
						code: {
							color: false,
						},
					},
				},
			},
		},
	},
	plugins: [require('@tailwindcss/typography')],
};