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
| /** @type {import('tailwindcss').Config} */
|
| // function genSimilarColorsName(brandName) {
| // return {
| // lighter: `var(--${brandName}-lighter-color)`,
| // light: `var(--${brandName}-light-color)`,
| // DEFAULT: `var(--${brandName}-color)`,
| // deep: `var(--${brandName}-deep-color)`,
| // deeper: `var(--${brandName}-deeper-color)`
| // };
| // }
| function withOpacityValue(variable) {
| // 返回一个函数，透明度为可选参数，这样在 HTML 元素中使用颜色基础类时，既可以采用 text-blue-500 方式，也支持 text-blue-500/20 快捷同时设置透明度的形式
| return ({ opacityValue }) => {
| if (opacityValue === undefined) {
| return `rgb(var(${variable}))`;
| }
| return `rgba(var(${variable}), ${opacityValue})`;
| };
| }
|
| export default {
| content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
| corePlugins: {
| // preflight 会修改元素的默认样式
| // NOTE: 已知的改为 true 的问题：1）html2canvas 生成的图片因为 image display 改变导致文字整体偏下；
| // 2）i 标签 display 修改，导致布局错误；3）border 颜色默认值不是黑色
| preflight: false,
| },
| // theme: {
| // // ...
| // // 修改Tailwind主题色配置，使用我们设计的这一套颜色
| // colors: {
| // white: '#fff',
| // black: '#191919',
| // transparent: 'transparent',
| // // 直接使用css变量
| // primary: genSimilarColorsName('primary'),
| // info: genSimilarColorsName('info'),
| // success: genSimilarColorsName('success'),
| // warning: genSimilarColorsName('warning'),
| // danger: genSimilarColorsName('danger')
| // }
| // },
| theme: {
| extend: {
| colors: {
| primary: {
| DEFAULT: '#1989fa',
| light: '#40a9ff',
| dark: '#096dd9',
| },
| info: {
| DEFAULT: '#909399',
| light: '#a6a9ad',
| dark: '#82848a',
| },
| success: {
| DEFAULT: '#67c23a',
| light: '#85ce61',
| dark: '#529b2e',
| },
| warning: {
| DEFAULT: '#e6a23c',
| light: '#ebb563',
| dark: '#b88230',
| },
| danger: {
| DEFAULT: '#f56c6c',
| light: '#f78989',
| dark: '#c45656',
| },
| },
| backgroundColor: {
| // 此处用来定义主题的背景色基础样式
| skin: {
| bg: withOpacityValue('--color-bg-base'),
| bgExr: withOpacityValue('--color-bg-base-exr'),
| bgSide: withOpacityValue('--color-bg-side'),
| bgBorder: withOpacityValue('--color-bg-border'),
| fo: withOpacityValue('--color-text-font'),
| card: withOpacityValue('--color-bg-card'),
| btn: withOpacityValue('--color-bg-btn'),
| avatar: withOpacityValue('--color-bg-avatar'),
| 'btn-hover': withOpacityValue('--color-bg-btn-hover'),
| },
| },
| textColor: {
| // 文本的基础样式
| primary: 'var(--color-text-base)',
| 'btn-base': 'var(--color-btn-base)',
| },
| },
| },
| plugins: [require('@tailwindcss/typography')],
| };
|
|
