personal-website/tailwind.config.mjs

/** @type {import('tailwindcss').Config} */
function withOpacity(variableName) {
	return ({ opacityValue }) => {
	  if (opacityValue !== undefined) {
		return `hsla(var(${variableName}), ${opacityValue})`
	  }
	  return `hsl(var(${variableName}))`
	}
  }

export default {
	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
	theme: {
		extend: {
			colors: {
				bkg: withOpacity('--color-bkg'),
				content: withOpacity('--color-content'),
				primary: withOpacity('--color-primary'),
				secondary: withOpacity('--color-secondary'),
				accent: withOpacity('--color-accent'),
			},
		},
	},
	plugins: [],
}

/*
--color-bkg: 0deg, 0%, 94%;
--color-content: 240deg, 4%, 9%;
--color-primary: 54deg, 100%, 50%;
--color-secondary: 237deg, 100%, 93%;
--color-accent: 262deg, 73%, 47%;
    }
*/