-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.config.ts
71 lines (61 loc) · 1.9 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
import type { Config } from 'tailwindcss';
import aspectRatioPlugin from '@tailwindcss/aspect-ratio';
import containerQueriesPlugin from '@tailwindcss/container-queries';
import typographyPlugin from '@tailwindcss/typography';
import tailwindAnimate from 'tailwindcss-animate';
type Scale = 'gray' | 'pink' | 'salmon' | 'indigo' | 'red';
const generateColorScale = (scale: Scale) => ({
DEFAULT: `hsl(var(--${scale}-9))`,
'foreground-muted': `hsl(var(--${scale}-11))`,
foreground: `hsl(var(--${scale}-12))`,
app: `hsl(var(--${scale}-1))`,
subtle: `hsl(var(--${scale}-2))`,
'subtle-border': `hsl(var(--${scale}-6))`,
element: `hsl(var(--${scale}-3))`,
'element-hover': `hsl(var(--${scale}-4))`,
'element-active': `hsl(var(--${scale}-5))`,
'element-border': `hsl(var(--${scale}-7))`,
'element-border-hover': `hsl(var(--${scale}-8))`,
solid: `hsl(var(--${scale}-9))`,
'solid-hover': `hsl(var(--${scale}-10))`,
});
const config: Config = {
content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
darkMode: 'class',
theme: {
container: {
center: true,
padding: '1.5rem',
screens: {
'2xl': '1400px',
},
},
extend: {
colors: {
background: 'hsl(var(--gray-1))',
foreground: 'hsl(var(--gray-12))',
'foreground-muted': 'hsl(var(--gray-11))',
border: 'hsl(var(--gray-4))',
gray: generateColorScale('gray'),
pink: generateColorScale('pink'),
salmon: generateColorScale('salmon'),
indigo: generateColorScale('indigo'),
red: generateColorScale('red'),
},
fontFamily: {
sans: ['var(--font-geist-sans)'],
mono: ['var(--font-geist-mono)'],
},
},
},
plugins: [
typographyPlugin,
aspectRatioPlugin,
{
handler: containerQueriesPlugin.handler,
config: containerQueriesPlugin.config ?? {},
},
tailwindAnimate,
],
};
export default config;