forked from duerrsimon/bioicons
-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.config.js
79 lines (78 loc) · 2.28 KB
/
tailwind.config.js
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
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
purge: [],
darkMode: 'class', // or 'media' or 'class'
experimental: {
darkModeVariant: true,
uniformColorPalette: true,
},
plugins: [require('@tailwindcss/ui')],
theme: {
extend: {
borderRadius: {
1: `${1 * 0.25}rem`,
2: `${2 * 0.25}rem`,
3: `${3 * 0.25}rem`,
4: `${4 * 0.25}rem`,
5: `${5 * 0.25}rem`,
6: `${6 * 0.25}rem`,
},
boxShadow: {
px: defaultTheme.boxShadow.xs,
1: defaultTheme.boxShadow.sm,
2: defaultTheme.boxShadow.default,
3: defaultTheme.boxShadow.md,
4: defaultTheme.boxShadow.lg,
5: defaultTheme.boxShadow.xl,
6: defaultTheme.boxShadow['2xl'],
'px-1': defaultTheme.boxShadow.xs + ', ' + defaultTheme.boxShadow.sm,
'px-2':
defaultTheme.boxShadow.xs + ', ' + defaultTheme.boxShadow.default,
'px-3': defaultTheme.boxShadow.xs + ', ' + defaultTheme.boxShadow.md,
'px-4': defaultTheme.boxShadow.xs + ', ' + defaultTheme.boxShadow.lg,
'px-5': defaultTheme.boxShadow.xs + ', ' + defaultTheme.boxShadow.xl,
'px-6':
defaultTheme.boxShadow.xs + ', ' + defaultTheme.boxShadow['2xl'],
},
colors: {
// html {
// --theme: hsl(270, 100%, 50%);
// --dark-theme: hsl(270, 100%, 43.75%);
// }
theme: '#10B981',
'dark-theme': '#065F46',
},
fontFamily: {
sans: [
...defaultTheme.fontFamily.sans.slice(0, 3),
'Inter',
...defaultTheme.fontFamily.sans.slice(3),
],
},
opacity: {
0: '0',
6.25: '0.0625',
12.5: '0.125',
18.75: '0.1875',
25: '0.25',
75: '0.75',
81.25: '0.8125',
87.5: '0.875',
93.75: '0.9375',
100: '1',
},
},
screens: {
sm: 640 + 'px',
md: 768 + 'px',
lg: 24 + 1024 + 24 + 'px',
xl: 24 + 1280 + 24 + 'px',
},
},
variants: {
boxShadow: ({ after }) => after(['dark']),
opacity: ({ after }) => after(['group-hover', 'group-focus']),
scale: ({ after }) => after(['group-hover', 'group-focus']),
textColor: ({ after }) => after(['group-hover', 'group-focus']),
},
}