tailwind.config.js

const colors = require('./colors')

module.exports = {
	future: {
		purgeLayersByDefault: true,
		applyComplexClasses: true,
	},
	purge: {
		content: ['./pages/**/*.{js,ts,jsx,tsx}', './src/components/**/*.{js,ts,jsx,tsx}'],
		options: {
			safelist: {
				standard: ['outline-none'],
			},
		},
	},
	theme: {
		fontFamily: {
			sans: [
				'Roboto',
				'sans-serif',
				'ui-sans-serif',
				'system-ui',
				' -apple-system',
				'BlinkMacSystemFont',
				'Segoe UI',
				'Helvetica Neue',
				'Arial',
				'Noto Sans',
				'Apple Color Emoji',
				'Segoe UI Emoji',
				'Segoe UI Symbol',
				'Noto Color Emoji',
			],
		},
		extend: {
			screens: {
				extends: {
					xsm: '320px',
					'2xl': '1440px',
					'3xl': '1920px',
					'4xl': '2560px',
					range: { min: '500px', max: '700px' },
				},
			},
			colors: {
				transparent: 'transparent',
				current: 'currentColor',
				white: colors.white,
				black: colors.black,
				gray: colors.gray,
				primary: colors.primary,
				success: colors.success,
				danger: colors.danger,
				warning: colors.warning,
			},
			spacing: {
				0: '0px',
				px: '1px',
				0.5: '2px',
				1: '4px',
				1.5: '6px',
				2: '8px',
				2.5: '10px',
				3: '12px',
				3.5: '14px',
				4: '16px',
				5: '20px',
				6: '24px',
				7: '28px',
				8: '32px',
				9: '36px',
				10: '40px',
				11: '44px',
				12: '48px',
				14: '56px',
				16: '64px',
				18: '72',
				20: '80px',
				24: '96px',
				28: '112px',
				32: '128px',
				36: '144px',
				40: '160px',
				44: '176px',
				48: '192px',
				52: '208px',
				56: '224px',
				60: '240px',
				64: '256px',
				72: '288px',
				80: '320px',
				96: '384px',
			},
			maxWidth: (theme) => ({
				...theme('spacing'),
			}),
			minHeight: (theme) => ({
				...theme('spacing'),
			}),
		},
	},
}