tailwind.config.js

/** @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}',
		'./templates/**/*.{js,ts,jsx,tsx,mdx}',
	],
	safelist: [
		{
			pattern: /bg-(warning|error)/,
		},
	],
	theme: {
		extend: {
			backgroundImage: {
				'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
				'gradient-conic':
					'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
			},
			borderWidth: {
				6: '6px',
				12: '12px',
			},
			colors: {
				primary: 'var(--primary-color)',
				secondary: 'var(--secondary-color)',
				accent: 'var(--accent-color)',
				tertiary: 'var(--tertiary-color)',
				neutral: 'var(--neutral-color)',
				dark: 'var(--dark-color)',
				light: 'var(--light-color)',
				info: 'var(--info-color)',
				success: 'var(--success-color)',
				warning: 'var(--warning-color)',
				error: 'var(--error-color)',
				danger: 'var(--error-color)',
				current: 'currentColor',
			},
			transitionProperty: {
				height: 'height',
				'max-height': 'max-height',
			},
			zIndex: {
				100: '100',
			},
		},
	},
	plugins: [
		require('@tailwindcss/forms')({
			strategy: 'class',
		}),
		require('@tailwindcss/typography'),
	],
}