tailwind.config.js

const plugin = require('tailwindcss/plugin');
module.exports = {
	purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
	darkMode: false,

	theme: {
		animatecss: {
			prefix: 'as',
		},

		screens: {
			xs: { max: '340px' },
			sm: '481px',
			md: '992px',
			lg: '1200px',
			xl: '1480px',
			'2xl': '1536px',
		},
		extend: {
			colors: {
				primary: '#3282B8',
				secondary: '#181B19',
				tertiary: '#BBE1FA',
				quaternary: '#0F4C75',

				red: {
					50: '#ff6d6d',
					100: '#ff6363',
					200: '#ff5959',
					300: '#ff4f4f',
					400: '#ff4545',
					500: '#ff3b3b',
					600: '#f53131',
					700: '#eb2727',
					800: '#e11d1d',
					900: '#d71313',
					base: '#FF3B3B',
					light: '#FF5C5C',
					dark: '#E53535',
				},
				green: {
					50: '#38f4a2',
					100: '#2eea98',
					200: '#24e08e',
					300: '#1ad684',
					400: '#10cc7a',
					500: '#06c270',
					600: '#00b866',
					700: '#00ae5c',
					800: '#00a452',
					900: '#009a48',
					base: '#06C270',
					light: '#181B19',
					dark: '#05A660',
				},
				blue: {
					50: '#3295ff',
					100: '#288bff',
					200: '#1e81ff',
					300: '#1477ff',
					400: '#0a6dff',
					500: '#0063f7',
					600: '#0059ed',
					700: '#004fe3',
					800: '#0045d9',
					900: '#003bcf',
					base: '#0063F7',
					light: '#5B8DEF',
					dark: '#004FC4',
				},
				orange: {
					50: '#ffba32',
					100: '#ffb028',
					200: '#ffa61e',
					300: '#ff9c14',
					400: '#ff920a',
					500: '#ff8800',
					600: '#f57e00',
					700: '#eb7400',
					800: '#e16a00',
					900: '#d76000',
					base: '#FF8800',
					light: '#FDAC42',
					dark: '#E57A00',
				},
				yellow: {
					50: '#fffe32',
					100: '#fff428',
					200: '#ffea1e',
					300: '#ffe014',
					400: '#ffd60a',
					500: '#ffcc00',
					600: '#f5c200',
					700: '#ebb800',
					800: '#e1ae00',
					900: '#d7a400',
					base: '#FFCC00',
					light: '#FDDD48',
					dark: '#E5B800',
				},
				cyan: {
					50: '#32ffff',
					100: '#28f7ff',
					200: '#1eedfc',
					300: '#14e3f2',
					400: '#0ad9e8',
					500: '#00cfde',
					600: '#00c5d4',
					700: '#00bbca',
					800: '#00b1c0',
					900: '#00a7b6',
					base: '#00CFDE',
					light: '#73DFE7',
					dark: '#00B7C4',
				},
				rebeccapurple: {
					50: '#9832fe',
					100: '#8e28f4',
					200: '#841eea',
					300: '#7a14e0',
					400: '#700ad6',
					500: '#6600cc',
					600: '#5c00c2',
					700: '#5200b8',
					800: '#4800ae',
					900: '#3e00a4',
					base: '#6600cc',
					light: '#AC5DD9',
					dark: '#4C0099',
				},
				purple: {
					50: '#b232b2',
					100: '#a828a8',
					200: '#9e1e9e',
					300: '#941494',
					400: '#8a0a8a',
					500: '#800080',
					600: '#760076',
					700: '#6c006c',
					800: '#620062',
					900: '#580058',
					base: '#800080',
					light: '#b232b2',
					dark: '#580058',
				},
				gray: {
					50: '#ccd8de',
					100: '#c2ced4',
					200: '#b8c4ca',
					300: '#aebac0',
					400: '#a4b0b6',
					500: '#9aa6ac',
					600: '#909ca2',
					700: '#869298',
					800: '#7c888e',
					900: '#727e84',
					base: '#9aa6ac',
					light: '#E5E9EB',
					dark: '#84909A',
				},
				lavender: {
					50: '#cdc2d4',
					100: '#c3b8ca',
					200: '#b9aec0',
					300: '#afa4b6',
					400: '#a59aac',
					500: '#9b90a2',
					600: '#918698',
					700: '#877c8e',
					800: '#7d7284',
					900: '#73687a',
					base: '#877A90',
					light: '#CAC4CE',
					dark: '#685D6F',
				},
				pink: {
					50: '#ff32be',
					100: '#ff28b4',
					200: '#ff1eaa',
					300: '#ff14a0',
					400: '#f60a96',
					500: '#ec008c',
					600: '#e20082',
					700: '#d80078',
					800: '#ce006e',
					900: '#c40064',
					base: '#ec008c',
					light: '#ff32be',
					dark: '#c40064',
				},
				magenta: '#B1176A',
				'green-emerald': '#27626A',

				background: '#EFEFEF',
				white: '#FFFFFF',
				black: '#000000',
				light: '#FBFBFB',
				dark: '#212122',
				success: '#57CC99',
				error: '#FF3B3B',
				warning: '#FEC800',
				info: '#61A0B2',
				shipstation: '#92c43e',
			},
			animation: {
				'fade-in': 'fadeIn 0.7s forwards',
				'fade-out': 'fadeIn 0.7s forwards',
				'spin-slow': 'spin 5s linear infinite',
			},
			keyframes: {
				fadeIn: { '0%': { opacity: '0' }, '100%': { opacity: '1' } },
				fadeOut: { '0%': { opacity: '1' }, '100%': { opacity: '0' } },
			},
			letterSpacing: {
				tightest: '-.075em',
				tighter: '-.05em',
				tight: '-.025em',
				normal: '0',
				wide: '0.07em',
				wider: '0.17em',
				widest: '0.3em',
			},
		},
	},
	variants: {
		extend: {},
	},
	plugins: [
		require('tailwind-animatecss'),
		plugin(({ addUtilities }) =>
			addUtilities({
				'.flex-center': {
					display: 'flex',
					'align-items': 'center',
					'justify-content': 'center',
				},
				'.overflow-text-dotted': {
					overflow: 'hidden',
					'white-space': 'nowrap',
					'text-overflow': 'ellipsis',
				},
				'.shadow-light': {
					'box-shadow': '0 1px 15px 1px rgba(69, 65, 78, 0.08)',
				},

				'.img-shadow': {
					'-webkit-box-shadow': '-20px 20px 20px -5px rgba(0, 0, 0, 0.25)',
					'box-shadow': '-20px 20px 20px -5px rgba(0, 0, 0, 0.25)',
				},
			})
		),
	],
};