-
Notifications
You must be signed in to change notification settings - Fork 38
/
tailwind.config.cjs
106 lines (104 loc) · 2.26 KB
/
tailwind.config.cjs
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
/* eslint-disable no-undef */
/** @type {import('tailwindcss').Config} */
const safeListFile = 'safelist.txt'
// colors.indigo
const SAFELIST_COLORS = 'colors'
module.exports = {
mode: 'jit',
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
'./safelist.txt'
],
darkMode: 'class',
theme: {
fontFamily: {
sans: [
'Inter',
'ui-sans-serif',
'system-ui',
'-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: [
'ui-serif',
'Georgia',
'Cambria',
'"Times New Roman"',
'Times',
'serif',
],
mono: [
'ui-monospace',
'SFMono-Regular',
'Menlo',
'Monaco',
'Consolas',
'"Liberation Mono"',
'"Courier New"',
'monospace',
],
},
screens: {
xs: '576',
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
},
extend: {
typography: (theme) => ({
DEFAULT: {
css: {
color: theme('colors.gray.500'),
maxWidth: '65ch',
},
},
invert: {
css: {
color: theme('colors.gray.400'),
},
},
}),
},
},
plugins: [
// eslint-disable-next-line @typescript-eslint/no-var-requires
require('./twSafelistGenerator')({
path: safeListFile,
patterns: [
`text-{${SAFELIST_COLORS}}`,
`bg-{${SAFELIST_COLORS}}`,
`dark:bg-{${SAFELIST_COLORS}}`,
`dark:hover:bg-{${SAFELIST_COLORS}}`,
`dark:active:bg-{${SAFELIST_COLORS}}`,
`hover:text-{${SAFELIST_COLORS}}`,
`hover:bg-{${SAFELIST_COLORS}}`,
`active:bg-{${SAFELIST_COLORS}}`,
`ring-{${SAFELIST_COLORS}}`,
`hover:ring-{${SAFELIST_COLORS}}`,
`focus:ring-{${SAFELIST_COLORS}}`,
`focus-within:ring-{${SAFELIST_COLORS}}`,
`border-{${SAFELIST_COLORS}}`,
`focus:border-{${SAFELIST_COLORS}}`,
`focus-within:border-{${SAFELIST_COLORS}}`,
`dark:text-{${SAFELIST_COLORS}}`,
`dark:hover:text-{${SAFELIST_COLORS}}`,
`h-{height}`,
`w-{width}`,
],
}),
require('@tailwindcss/typography'),
],
};