generated from richard-unterberg/ts-react-vike-start
-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.config.ts
61 lines (57 loc) · 1.77 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
/** @type {import('tailwindcss').Config} */
import type { Config } from 'tailwindcss'
import colors from 'tailwindcss/colors'
import tw from 'tailwindcss/defaultTheme'
import { type PluginAPI } from 'tailwindcss/types/config'
export default {
content: ['./{pages,layouts,components,lib}/**/*.{html,js,jsx,ts,tsx}'],
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
black: '#000',
white: '#fff',
dark: colors.slate[950],
darkLight: colors.slate[900],
darkLightBorder: colors.slate[800],
darkLighter: colors.slate[700],
grayDark: colors.slate[600],
gray: colors.slate[400],
grayLight: colors.slate[300],
light: colors.slate[200],
primary: colors.sky[600],
success: '#57b354',
warning: '#F1B650',
error: colors.red[800],
},
extend: {
fontSize: {
base: ['18px', '28px'],
small: ['16px', '20px'],
},
fontFamily: {
sans: ['inter', ...tw.fontFamily.sans],
},
animation: {
'pulse-fast': 'pulse 0.6s linear infinite',
},
},
},
plugins: [
({ addBase, theme }: PluginAPI) => {
const extractColorVars = (colorObj: Record<string, string>, colorGroup = '') =>
Object.entries(colorObj).reduce((vars, [colorKey, value]) => {
const cssVariable =
colorKey === 'DEFAULT' ? `--tw${colorGroup}` : `--tw${colorGroup}-${colorKey}`
const newVars: Record<string, string> =
typeof value === 'string'
? { [cssVariable]: value }
: extractColorVars(value, `-${colorKey}`)
return { ...vars, ...newVars }
}, {})
addBase({
':root': extractColorVars(theme('colors')),
})
},
],
} satisfies Config