tailwind.config.js

module.exports = {
	prefix: '',
	content: [
		'./site/*.{html,njk}',
		'./site/**/*.{html,njk}',
		'./site/**/**/*.{html,njk}',
		'./site/**/**/**/*.{html,njk}',
		'./site/**/**/**/**/*.{html,njk}',
	],
	important: false,
	separator: ':',
	theme: {
		extend: {
			screens: {
				xs: '320px',
				sm: '640px',
				md: '768px',
				lg: '1024px',
				xl: '1280px',
				xxxl: '1480px',
			},
			keyframes: {
				fade: {
					'0%': {opacity:  '0'},
					'100%': {opacity: '1'},
				}
			},
			animation: {
				fade: 'fade 1s ease-in-out',
			},
			colors: {
				transparent: 'transparent',

				black: '#000',
				white: '#fff',
				lightblue: {
					500: '#16AEDB',
				},
				grey: {
					50: '#f2f2f2',
					100: '#f4f4f4',
					200: '#dedede',
					300: '#707070',
					400: '#cbd5e0',
					500: '#a0aec0',
					600: '#718096',
					700: '#4a5568',
					800: '#2d3748',
					900: '#1a202c',
					1000: '#949494'
				},
				red: {
					100: '#c94b62',
					200: '#e03f67',
					300: '#a8183c',
					400: '#fc8181',
					500: '#f56565',
					600: '#e53e3e',
					700: '#c53030',
					800: '#9b2c2c',
					900: '#BB4E69',
					1000: '#AD556A'
				},
				orange: {
					100: '#fffaf0',
					200: '#feebc8',
					300: '#fbd38d',
					400: '#f6ad55',
					500: '#ed8936',
					600: '#dd6b20',
					700: '#c05621',
					800: '#9c4221',
					900: '#7b341e',
				},
				yellow: {
					100: '#f2a541',
					200: '#ecb22d',
					300: '#cc7b00',
					400: '#f6e05e',
					500: '#ecc94b',
					600: '#d69e2e',
					700: '#b7791f',
					800: '#975a16',
					900: '#744210',
				},
				brown: {
					100: '#a18276',
				},
				green: {
					100: '#86ba90',
					200: '#3cb187',
					300: '#118859',
					400: '#68d391',
					500: '#48bb78',
					600: '#38a169',
					700: '#2f855a',
					800: '#276749',
					900: '#22543d',
				},
				teal: {
					100: '#e6fffa',
					200: '#b2f5ea',
					300: '#81e6d9',
					400: '#4fd1c5',
					500: '#38b2ac',
					600: '#319795',
					700: '#2c7a7b',
					800: '#285e61',
					900: '#234e52',
				},
				blue: {
					50: 'rgba(22, 174, 219, 0.15)',
					100: '#16aedb',
					200: '#2574a9',
					300: '#064789',
					400: '#63b3ed',
					500: '#4299e1',
					600: '#3182ce',
					700: '#2b6cb0',
					800: '#2c5282',
					900: '#2a4365',
				},
				indigo: {
					100: '#ebf4ff',
					200: '#c3dafe',
					300: '#a3bffa',
					400: '#7f9cf5',
					500: '#667eea',
					600: '#5a67d8',
					700: '#4c51bf',
					800: '#434190',
					900: '#3c366b',
				},
				purple: {
					100: '#a670ae',
					200: '#884193',
					300: '#d6bcfa',
					400: '#b794f4',
					500: '#9f7aea',
					600: '#805ad5',
					700: '#6b46c1',
					800: '#553c9a',
					900: '#5350A5',
					1000: '#54509F'
				},
				pink: {
					100: '#fff5f7',
					200: '#fed7e2',
					300: '#fbb6ce',
					400: '#f687b3',
					500: '#eb5286',
					600: '#d53f8c',
					700: '#b83280',
					800: '#97266d',
					900: '#702459',
				},
			},
			backgroundColor: (theme) => theme('colors'),
			backgroundPosition: {
				bottom: 'bottom',
				center: 'center',
				left: 'left',
				'left-bottom': 'left bottom',
				'left-top': 'left top',
				right: 'right',
				'right-bottom': 'right bottom',
				'right-top': 'right top',
				top: 'top',
			},
			backgroundSize: {
				auto: 'auto',
				cover: 'cover',
				contain: 'contain',
			},
			borderColor: (theme) => ({
				...theme('colors'),
				default: theme('colors.grey.300', 'currentColor'),
			}),
			borderWidth: {
				default: '1px',
				0: '0',
				1: '1px',
				2: '2px',
				4: '4px',
				8: '8px',
			},
			borderRadius: {
				72: '72px'
			},
			boxShadow: {
				primary: '0px 0px 8px rgba(0, 0, 0, 0.29)',
				secondary: '0px 0px 6px rgba(0, 0, 0, 0.29)',
				default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
				md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
				lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
				xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
				'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
				inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
				outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
				none: 'none',
				testimonial: '-44px 46px 3px -6px_ gba(82,21,82,1)',
			},
			container: {},
			cursor: {
				auto: 'auto',
				default: 'default',
				pointer: 'pointer',
				wait: 'wait',
				text: 'text',
				move: 'move',
				'not-allowed': 'not-allowed',
			},
			fill: {
				current: 'currentColor',
				blue: '#2574a9',
				white: '#fff',
			},
			flex: {
				1: '1 1 0%',
				2: '2 1 0%',
				auto: '1 1 auto',
				initial: '0 1 auto',
				none: 'none',
			},
			flexGrow: {
				0: '0',
				grow: '1',
				default: '1',
			},
			flexShrink: {
				0: '0',
				default: '1',
			},
			fontFamily: {
				heading: [
					'Roboto Slab',
					'-apple-system',
					'BlinkMacSystemFont',
					'"Segoe UI"',
					'Roboto',
					'"Helvetica Neue"',
					'Arial',
					'"Noto Sans"',
					'sans-serif',
					'"Apple Color Emoji"',
					'"Segoe UI Emoji"',
					'"Segoe UI Symbol"',
					'"Noto Color Emoji"',
				],
				paragraph: [
					'Poppins',
					'-apple-system',
					'BlinkMacSystemFont',
					'"Segoe UI"',
					'"Helvetica Neue"',
					'Arial',
					'"Noto Sans"',
					'sans-serif',
					'"Apple Color Emoji"',
					'"Segoe UI Emoji"',
					'"Segoe UI Symbol"',
					'"Noto Color Emoji"',
				],
				sans: [
					'Poppins',
					'-apple-system',
					'BlinkMacSystemFont',
					'"Segoe UI"',
					'Roboto',
					'"Helvetica Neue"',
					'Arial',
					'"Noto Sans"',
					'sans-serif',
					'"Apple Color Emoji"',
					'"Segoe UI Emoji"',
					'"Segoe UI Symbol"',
					'"Noto Color Emoji"',
				],
				serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
				mono: [
					'Menlo',
					'Monaco',
					'Consolas',
					'"Liberation Mono"',
					'"Courier New"',
					'monospace',
				],
			},
			fontSize: {
				xs: '11px',
				sm: '14px',
				md: '16px',
				lg: '18px',
				xl: '20px',
				'2xl': '24px',
				'3xl': '32px',
				'4xl': '30px',
				'5xl': '40px',
				'6xl': '60px',
				'9xl': '95px',
			},
			fontWeight: {
				hairline: '100',
				thin: '200',
				light: '300',
				normal: '400',
				medium: '500',
				semibold: '600',
				bold: '700',
				extrabold: '800',
				black: '900',
			},
			aspectRatio: {
				'4/3': '4 / 3',
			},
			height: (theme) => ({
				auto: 'auto',
				...theme('spacing'),
				full: '100%',
				screen: '100vh',
			}),
			inset: {
				0: '0',
				100: '100px',
				auto: 'auto',
				'-16': '-4rem',
				'1/2': '50%',
			},
			letterSpacing: {
				tighter: '-0.05em',
				tight: '-0.025em',
				normal: '0',
				wide: '0.025em',
				wider: '0.05em',
				widest: '0.1em',
			},
			lineHeight: {
				none: '1',
				xs: '16px',
				sm: '20px',
				md: '24px',
				lg: '26px',
				xl: '30px',
				'2xl': '32px',
				'3xl': '34px',
				'4xl': '40px',
				'5xl': '48px',
				'112': '112%',
			},
			listStyleType: {
				none: 'none',
				disc: 'disc',
				decimal: 'decimal',
			},
			margin: (theme, { negative }) => ({
				auto: 'auto',
				...theme('spacing'),
				...negative(theme('spacing')),
			}),
			maxHeight: {
				full: '100%',
				screen: '100vh',
				8: '2rem',
				10: '3.8rem',
				12: '4rem',
				13: '4.5rem',
				15: '5rem',
				18: '6rem',
				36: '12rem',
			},
			maxWidth: {
				xs: '22rem',
				sm: '24rem',
				md: '28rem',
				lg: '32rem',
				xl: '36rem',
				'2xl': '42rem',
				'3xl': '54rem',
				'4xl': '58rem',
				'5xl': '60rem',
				'6xl': '64rem',
				'7xl': '72rem',
				'9xl': '100rem',
				full: '100%',
			},
			minHeight: {
				0: '0',
				50: '50vh',
				full: '100%',
				screen: '100vh',
				80: '80vh',
			},
			minWidth: {
				0: '0',
				'1/3': '33%',
				full: '100%',
			},
			objectPosition: {
				bottom: 'bottom',
				center: 'center',
				left: 'left',
				'left-bottom': 'left bottom',
				'left-top': 'left top',
				right: 'right',
				'right-bottom': 'right bottom',
				'right-top': 'right top',
				top: 'top',
			},
			opacity: {
				0: '0',
				25: '0.25',
				50: '0.5',
				75: '0.75',
				85: '0.85',
				100: '1',
			},
			order: {
				first: '-9999',
				last: '9999',
				none: '0',
				1: '1',
				2: '2',
				3: '3',
				4: '4',
				5: '5',
				6: '6',
				7: '7',
				8: '8',
				9: '9',
				10: '10',
				11: '11',
				12: '12',
			},
			padding: (theme) => theme('spacing'),
			stroke: {
				current: 'currentColor',
			},
			textColor: (theme) => theme('colors'),
			width: (theme) => ({
				auto: 'auto',
				...theme('spacing'),
				'1/2': '50%',
				'1/3': '33.333333%',
				'2/3': '66.666667%',
				'1/4': '25%',
				'2/4': '50%',
				'3/4': '75%',
				'1/5': '20%',
				'2/5': '40%',
				'3/5': '60%',
				'4/5': '80%',
				'1/6': '16.666667%',
				'2/6': '33.333333%',
				'3/6': '50%',
				'4/6': '66.666667%',
				'5/6': '83.333333%',
				'1/12': '8.333333%',
				'2/12': '16.666667%',
				'3/12': '25%',
				'4/12': '33.333333%',
				'5/12': '41.666667%',
				'6/12': '50%',
				'7/12': '58.333333%',
				'8/12': '66.666667%',
				'9/12': '75%',
				'10/12': '83.333333%',
				'11/12': '91.666667%',
				full: '100%',
				screen: '100vw',
			}),
			zIndex: {
				auto: 'auto',
				0: '0',
				1: '1',
				10: '10',
				20: '20',
				30: '30',
				40: '40',
				50: '50',
				'-1': '-1',
				'-20': '-20',
			},
		}
	},
	variants: {
		alignContent: ['responsive'],
		alignItems: ['responsive'],
		alignSelf: ['responsive'],
		appearance: ['responsive'],
		backgroundAttachment: ['responsive'],
		backgroundColor: ['responsive', 'hover', 'focus'],
		backgroundPosition: ['responsive'],
		backgroundRepeat: ['responsive'],
		backgroundSize: ['responsive'],
		borderCollapse: ['responsive'],
		borderColor: ['responsive', 'hover', 'focus'],
		borderRadius: ['responsive'],
		borderStyle: ['responsive'],
		borderWidth: ['responsive'],
		boxShadow: ['responsive', 'hover', 'focus'],
		cursor: ['responsive'],
		display: ['responsive'],
		fill: ['responsive'],
		flex: ['responsive'],
		flexDirection: ['responsive'],
		flexGrow: ['responsive'],
		flexShrink: ['responsive'],
		flexWrap: ['responsive'],
		float: ['responsive'],
		fontFamily: ['responsive'],
		fontSize: ['responsive'],
		fontSmoothing: ['responsive'],
		fontStyle: ['responsive'],
		fontWeight: ['responsive', 'hover', 'focus'],
		height: ['responsive'],
		inset: ['responsive'],
		justifyContent: ['responsive'],
		letterSpacing: ['responsive'],
		lineHeight: ['responsive'],
		listStylePosition: ['responsive'],
		listStyleType: ['responsive'],
		margin: ['responsive'],
		maxHeight: ['responsive'],
		maxWidth: ['responsive'],
		minHeight: ['responsive'],
		minWidth: ['responsive'],
		objectFit: ['responsive'],
		objectPosition: ['responsive'],
		opacity: ['responsive', 'active', 'disabled'],
		order: ['responsive'],
		outline: ['responsive', 'focus'],
		overflow: ['responsive'],
		padding: ['responsive'],
		pointerEvents: ['responsive'],
		position: ['responsive'],
		resize: ['responsive'],
		stroke: ['responsive'],
		tableLayout: ['responsive'],
		textAlign: ['responsive'],
		textColor: ['responsive', 'hover', 'focus', 'active'],
		textDecoration: ['responsive', 'hover', 'focus'],
		textTransform: ['responsive'],
		userSelect: ['responsive'],
		verticalAlign: ['responsive'],
		visibility: ['responsive'],
		whitespace: ['responsive'],
		width: ['responsive'],
		wordBreak: ['responsive'],
		zIndex: ['responsive'],
	},
	corePlugins: {},

	plugins: [],
};