tailwind.config.js

import formsPlugin from '@tailwindcss/forms';
import typographyPlugin from '@tailwindcss/typography';

function withOpacityValue(variable) {
	return ({ opacityValue }) => {
		if (opacityValue === undefined) {
			return `rgb(var(${variable}))`;
		}
		return `rgb(var(${variable}) / ${opacityValue})`;
	};
}

/** @type {import('tailwindcss').Config} */
module.exports = {
	content: [
		'./pages/**/*.{js,ts,jsx,tsx,mdx}',
		'./components/**/*.{js,ts,jsx,tsx,mdx}',
		'./app/**/*.{js,ts,jsx,tsx,mdx}',
		'./src/**/*.{js,ts,jsx,tsx,mdx}',
	],
	theme: {
		extend: {
			colors: {
				primary: withOpacityValue('--color-primary'),
				contrast: withOpacityValue('--color-contrast'),
				notice: withOpacityValue('--color-accent'),
				shopPay: 'var(--color-shop-pay)',
			},
			screens: {
				sm: '32em',
				md: '48em',
				lg: '64em',
				xl: '80em',
				'2xl': '96em',
				'sm-max': { max: '48em' },
				'sm-only': { min: '32em', max: '48em' },
				'md-only': { min: '48em', max: '64em' },
				'lg-only': { min: '64em', max: '80em' },
				'xl-only': { min: '80em', max: '96em' },
				'2xl-only': { min: '96em' },
			},
			spacing: {
				nav: 'var(--height-nav)',
				screen: 'var(--screen-height, 100vh)',
			},
			height: {
				screen: 'var(--screen-height, 100vh)',
				'screen-no-nav':
					'calc(var(--screen-height, 100vh) - var(--height-nav))',
				'screen-dynamic': 'var(--screen-height-dynamic, 100vh)',
			},
			width: {
				mobileGallery: 'calc(100vw - 3rem)',
			},
			fontFamily: {
				sans: ['Helvetica Neue', 'ui-sans-serif', 'system-ui', 'sans-serif'],
				serif: ['"IBMPlexSerif"', 'Palatino', 'ui-serif'],
			},
			fontSize: {
				display: ['var(--font-size-display)', '1.1'],
				heading: ['var(--font-size-heading)', '1.25'],
				lead: ['var(--font-size-lead)', '1.333'],
				copy: ['var(--font-size-copy)', '1.5'],
				fine: ['var(--font-size-fine)', '1.333'],
			},
			maxWidth: {
				'prose-narrow': '45ch',
				'prose-wide': '80ch',
			},
			boxShadow: {
				border: 'inset 0px 0px 0px 1px rgb(var(--color-primary) / 0.08)',
				darkHeader: 'inset 0px -1px 0px 0px rgba(21, 21, 21, 0.4)',
				lightHeader: 'inset 0px -1px 0px 0px rgba(21, 21, 21, 0.05)',
			},
		},
	},
	plugins: [formsPlugin, typographyPlugin],
};