-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.config.js
61 lines (60 loc) · 2.07 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
const colors = require('tailwindcss/colors');
module.exports = {
purge: ['src/**/*.vue', 'public/**/*.html', 'src/**/*.ts'],
darkMode: 'class', // or 'media' or 'class'
theme: {
themeVariants: ['rtl'],
extend: {
colors: {
primary: {
'400': 'var(--ion-color-primary-tint, #4c8dff)',
'600': 'var(--ion-color-primary, #3880ff)',
'800': 'var(--ion-color-primary-shade, #3171e0)',
},
color: 'var(--ion-color-primary-contrast, #ffffff)',
// primary: 'var(--ion-color-primary)',
gray: colors.blueGray,
teal: colors.teal,
orange: colors.orange,
},
backgroundColors: {
page: 'var(--page-bg)',
primary: 'var(--ion-color-primary)',
},
fontFamily: {
sans: [
'Roboto',
'Cairo',
'-apple-system',
'BlinkMacSystemFont',
'Segoe UI',
],
},
},
},
variants: {
extend: {
animation: ['responsive', 'hover'],
backgroundColor: ['disabled', 'hover', 'focus', 'active'],
backgroundImage: ['disabled', 'responsive'],
borderColor: [
'disabled',
'hover',
'focus',
'active',
'group-hover',
],
boxShadow: ['disabled', 'hover', 'focus', 'active'],
cursor: ['disabled', 'hover'],
gradientColorStops: ['responsive', 'hover', 'focus'],
opacity: ['responsive', 'hover', 'focus', 'disabled'],
outline: ['hover', 'focus', 'disabled'],
textColor: ['hover', 'disabled', 'group-hover'],
textAlign: ['rtl'],
transform: ['rtl'],
rotate: ['rtl'],
borderWidth: ['rtl'],
},
},
plugins: [require('tailwindcss-multi-theme')],
};