You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
132 lines
2.6 KiB
132 lines
2.6 KiB
const plugin = require('tailwindcss/plugin')
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: ['./src/**/*.{html,js,vue,scss,css}'],
|
|
theme: {
|
|
extend: {
|
|
spacing: {
|
|
0: '0px',
|
|
0.5: '2px',
|
|
1: '4px',
|
|
1.5: '6px',
|
|
2: '8px',
|
|
2.5: '10px',
|
|
3: '12px',
|
|
3.5: '14px',
|
|
4: '16px',
|
|
5: '20px',
|
|
6: '24px',
|
|
7: '28px',
|
|
8: '32px',
|
|
9: '36px',
|
|
10: '40px',
|
|
11: '44px',
|
|
12: '48px',
|
|
14: '56px',
|
|
16: '64px',
|
|
20: '80px',
|
|
24: '96px',
|
|
28: '112px',
|
|
32: '128px',
|
|
36: '144px',
|
|
40: '160px',
|
|
44: '176px',
|
|
48: '192px',
|
|
52: '208px',
|
|
56: '224px',
|
|
60: '240px',
|
|
64: '256px',
|
|
72: '288px',
|
|
80: '320px',
|
|
96: '384px'
|
|
},
|
|
fontSize: {
|
|
12: '12px',
|
|
14: '14px',
|
|
16: '16px',
|
|
18: '18px',
|
|
20: '20px',
|
|
22: '22px',
|
|
24: '24px',
|
|
26: '26px',
|
|
28: '28px',
|
|
30: '30px',
|
|
32: '32px',
|
|
34: '34px',
|
|
36: '36px',
|
|
38: '38px',
|
|
40: '40px',
|
|
42: '42px',
|
|
44: '44px',
|
|
46: '46px',
|
|
48: '48px',
|
|
50: '50px',
|
|
52: '52px',
|
|
54: '54px',
|
|
56: '56px',
|
|
58: '58px',
|
|
60: '60px'
|
|
},
|
|
borderRadius: {
|
|
none: '0',
|
|
sm: '2px',
|
|
DEFAULT: '4px',
|
|
md: '6px',
|
|
xl: '8px',
|
|
lg: '12px',
|
|
'2xl': '16px',
|
|
'3xl': '24px',
|
|
full: '50%'
|
|
},
|
|
lineHeight: {
|
|
3: '12px',
|
|
4: '16px',
|
|
5: '20px',
|
|
6: '24px',
|
|
7: '28px',
|
|
8: '32px',
|
|
9: '36px',
|
|
10: '40px'
|
|
},
|
|
zIndex: {
|
|
100: '100',
|
|
200: '200',
|
|
300: '300',
|
|
400: '400',
|
|
500: '500',
|
|
600: '600',
|
|
700: '700',
|
|
800: '800',
|
|
900: '900',
|
|
max: '9999'
|
|
}
|
|
}
|
|
},
|
|
plugins: [
|
|
plugin(function ({ addComponents }) {
|
|
addComponents({
|
|
'.flex-center': {
|
|
display: 'flex',
|
|
'align-items': 'center',
|
|
'justify-content': 'center'
|
|
},
|
|
'.cover': {
|
|
width: '100%',
|
|
height: '100%',
|
|
'object-fit': 'cover'
|
|
},
|
|
'.contain': {
|
|
width: '100%',
|
|
height: '100%',
|
|
'object-fit': 'contain'
|
|
},
|
|
'.scale-down': {
|
|
width: '100%',
|
|
height: '100%',
|
|
'object-fit': 'scale-down'
|
|
}
|
|
})
|
|
})
|
|
]
|
|
}
|
|
|