MyImplementationsInReact/tailwind.config.cjs at develop · sajermann/MyImplementationsInReact · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
/* eslint-disable @typescript-eslint/no-var-requires */
/* eslint-disable global-require */
/* eslint-disable import/no-extraneous-dependencies */

module.exports = {
	darkMode: 'class',
	content: ['./src/**/*.tsx', './src/**/*.ts', '**.html'],

	theme: {
		extend: {
			colors: {
				brand: {
					300: '#996DFF',
					500: '#8257e6',
				},
				primary: {
					100: '#b4daff',
					300: '#0068E2',
					500: '#0054B6',
					700: '#476fe6',
				},
				secondary: {
					100: '#FDB713',
					500: '#F5821F',
					700: '#F05A22',
					900: '#EF402F',
				},
				info: {
					500: '#E2E3E5',
					700: '#41464B',
				},
				success: {
					500: '#D1E7DD',
					700: '#0F5132',
				},
				error: {
					500: '#F8D7DA',
					600: '#BF2E3A',
					700: '#842029',
				},
				warning: {
					500: '#FFF3CD',
					700: '#664D03',
				},
				dark: {
					400: '#18181b',
					500: '#09090b',
					600: '#1f2937',
					700: '#0f1926',
				},
				odd: {
					500: '#F2F2F2',
				},
			},
			screens: {
				xm: '400px',
				sm: '640px',
				md: '768px',
				lg: '1024px',
				xl: '1280px',
				'2xl': '1366px',
				'3xl': '1536px',
				'4xl': '1920px',
			},
			keyframes: {
				overlayShow: {
					from: { opacity: 0 },
					to: { opacity: 1 },
				},
				overlayClose: {
					from: { opacity: 1 },
					to: { opacity: 0 },
				},
				contentShow: {
					from: { opacity: 0, transform: 'translate(-50%, -48%) scale(0.96)' },
					to: { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
				},
				contentClose: {
					from: { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
					to: { opacity: 0, transform: 'translate(-50%, -48%) scale(0.96)' },
				},
				enter: {
					'0%': { transform: 'scale(0.9)', opacity: 0 },
					'100%': { transform: 'scale(1)', opacity: 1 },
				},
				leave: {
					'0%': { transform: 'scale(1)', opacity: 1 },
					'100%': { transform: 'scale(0.9)', opacity: 0 },
				},
			},
			animation: {
				overlayShow: 'overlayShow 400ms cubic-bezier(0.16, 1, 0.3, 1)',
				overlayClose: 'overlayClose 300ms cubic-bezier(0.16, 1, 0.3, 1)',
				contentShow: 'contentShow 400ms cubic-bezier(0.16, 1, 0.3, 1)',
				contentClose: 'contentClose 300ms cubic-bezier(0.16, 1, 0.3, 1)',
				enter: 'enter 200ms ease-out',
				leave: 'leave 150ms ease-in forwards',
			},
		},
	},
	plugins: [
		require('tailwind-scrollbar')({ nocompatible: true }),
		require('tailwindcss-animate'),
	],
	variants: {
		scrollbar: ['rounded'],
	},
};