-
Notifications
You must be signed in to change notification settings - Fork 4
/
tailwind.config.ts
135 lines (132 loc) · 5.35 KB
/
tailwind.config.ts
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
import defaultTheme from 'tailwindcss/defaultTheme';
import { utopiaClamp } from './src/scripts/utils/utopiaClamp';
import type { Config } from 'tailwindcss';
export default {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
prefix: 'u-',
corePlugins: {
container: false
},
theme: {
extend: {
fontFamily: {
serif: ['Times New Roman', ...defaultTheme.fontFamily.serif],
sans: ['Arial', ...defaultTheme.fontFamily.sans]
},
fontSize: {
h1: utopiaClamp(60, 120),
h2: utopiaClamp(40, 80),
body: utopiaClamp(14, 16),
button: '14px'
},
colors: {
black: '#000000',
white: '#ffffff',
primary: '#312dfb'
},
screens: {
'to-2xs': { max: '339px' },
'2xs': '340px',
'to-xs': { max: '499px' },
xs: '500px',
'to-sm': { max: '699px' },
sm: '700px',
'to-md': { max: '999px' },
md: '1000px',
'to-lg': { max: '1199px' },
lg: '1200px',
'to-xl': { max: '1399px' },
xl: '1400px',
'to-2xl': { max: '1599px' },
'2xl': '1600px',
'to-3xl': { max: '1799px' },
'3xl': '1800px',
'to-4xl': { max: '1999px' },
'4xl': '2000px',
'to-5xl': { max: '2399px' },
'5xl': '2400px'
},
spacing: {
containerMargin: '20px',
containerMarginMobile: '10px',
'fluid-xs': utopiaClamp(8, 10),
'fluid-sm': utopiaClamp(16, 24),
'fluid-md': utopiaClamp(24, 32),
'fluid-lg': utopiaClamp(32, 40),
'fluid-xl': utopiaClamp(40, 56),
'fluid-2xl': utopiaClamp(56, 80),
'fluid-3xl': utopiaClamp(80, 128),
'fluid-4xl': utopiaClamp(128, 160)
},
gap: {
gutter: '20px',
gutterMobile: '10px'
},
transitionDuration: {
fast: '0.2s',
default: '0.4s',
slow: '0.6s',
slower: '0.8s',
slowest: '1s'
},
transitionTimingFunction: {
// Smooth
default: 'cubic-bezier(0.380, 0.005, 0.215, 1)'
// // Common easings
// power1: {
// in: 'cubic-bezier(0.550, 0.085, 0.680, 0.530)',
// out: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
// inOut: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
// },
// power2: {
// in: 'cubic-bezier(0.550, 0.055, 0.675, 0.190)',
// out: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
// inOut: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',
// },
// power3: {
// in: 'cubic-bezier(0.895, 0.030, 0.685, 0.220)',
// out: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',
// inOut: 'cubic-bezier(0.770, 0.000, 0.175, 1.000)',
// },
// power4: {
// in: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)',
// out: 'cubic-bezier(0.230, 1.000, 0.320, 1.000)',
// inOut: 'cubic-bezier(0.860, 0.000, 0.070, 1.000)',
// },
// expo: {
// in: 'cubic-bezier(0.950, 0.050, 0.795, 0.035)',
// out: 'cubic-bezier(0.190, 1.000, 0.220, 1.000)',
// inOut: 'cubic-bezier(1.000, 0.000, 0.000, 1.000)',
// },
// back: {
// in: 'cubic-bezier(0.600, -0.280, 0.735, 0.045)',
// out: 'cubic-bezier(0.175, 00.885, 0.320, 1.275)',
// inOut: 'cubic-bezier(0.680, -0.550, 0.265, 1.550)',
// },
// sine: {
// in: 'cubic-bezier(0.470, 0.000, 0.745, 0.715)',
// out: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',
// inOut: 'cubic-bezier(0.445, 0.050, 0.550, 0.950)',
// },
// circ: {
// in: 'cubic-bezier(0.600, 0.040, 0.980, 0.335)',
// out: 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',
// inOut: 'cubic-bezier(0.785, 0.135, 0.150, 0.860)',
// },
// slow: {
// out: 'cubic-bezier(.04,1.15,0.4,.99)',
// },
// bounce: 'cubic-bezier(0.17, 0.67, 0.3, 1.33)',
// smooth: 'cubic-bezier(0.380, 0.005, 0.215, 1)',
},
zIndex: {
modal: '200',
header: '100',
above: '1',
default: '0',
below: '-1'
}
}
},
plugins: []
} satisfies Config;