fe/tailwind.config.js at main · n9e/fe · GitHub

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
function withOpacityValue(variable) {
  return ({ opacityValue }) => {
    if (opacityValue === undefined) {
      return `rgb(var(${variable}))`;
    }
    return `rgb(var(${variable}) / ${opacityValue})`;
  };
}

module.exports = {
  darkMode: 'class',
  important: true,
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  // 添加下面的代码,禁用 `清除浏览器默认样式`, 解决和antd的样式冲突
  // (这样 `@tailwind base` 就只会添加一些默认的 tw 变量.不会去清除浏览器默认样式了.)
  corePlugins: {
    preflight: false,
  },
  variants: {
    extend: {
      borderWidth: ['last'],
    },
  },
  plugins: [
    function ({ addVariant }) {
      addVariant('children', '& > *');
      addVariant('children-icon', '& > svg'); // antd icon
      addVariant('children-icon2', '& > .anticon > svg'); // antd icon
    },
    require('tailwindcss-animate'),
  ],
  theme: {
    extend: {
      spacing: {
        4.5: '1.125rem',
        3.5: '0.875rem',
      },
      colors: {
        fc: {
          50: withOpacityValue('--fc-fill-1-rgb'),
          100: withOpacityValue('--fc-fill-2-rgb'),
          150: withOpacityValue('--fc-fill-2-5-rgb'),
          200: withOpacityValue('--fc-fill-3-rgb'),
          300: withOpacityValue('--fc-fill-4-rgb'),
          400: withOpacityValue('--fc-fill-5-rgb'),
          500: withOpacityValue('--fc-fill-6-rgb'),
          600: withOpacityValue('--fc-fill-7-rgb'),
        },
        violet: {
          100: 'var(--fc-violet-1)',
          200: 'var(--fc-violet-2)',
          300: 'var(--fc-violet-3)',
          400: 'var(--fc-violet-4)',
          500: 'var(--fc-violet-5)',
          600: 'var(--fc-violet-6)',
          700: 'var(--fc-violet-7)',
          800: 'var(--fc-violet-8)',
          900: withOpacityValue('--fc-violet-9-rgb'),
          1000: withOpacityValue('--fc-violet-10-rgb'),
          1100: withOpacityValue('--fc-violet-11-rgb'),
          1200: withOpacityValue('--fc-violet-12-rgb'),
        },
        indigo: {
          100: 'var(--fc-indigo-1)',
          200: 'var(--fc-indigo-2)',
          300: 'var(--fc-indigo-3)',
          400: 'var(--fc-indigo-4)',
          500: 'var(--fc-indigo-5)',
          600: 'var(--fc-indigo-6)',
          700: 'var(--fc-indigo-7)',
          800: 'var(--fc-indigo-8)',
          900: withOpacityValue('--fc-indigo-9-rgb'),
          1000: withOpacityValue('--fc-indigo-10-rgb'),
          1100: withOpacityValue('--fc-indigo-11-rgb'),
          1200: withOpacityValue('--fc-indigo-12-rgb'),
        },
        red: {
          100: 'var(--fc-red-1)',
          200: 'var(--fc-red-2)',
          300: 'var(--fc-red-3)',
          400: 'var(--fc-red-4)',
          500: 'var(--fc-red-5)',
          600: 'var(--fc-red-6)',
          700: 'var(--fc-red-7)',
          800: 'var(--fc-red-8)',
          900: withOpacityValue('--fc-red-9-rgb'),
          1000: withOpacityValue('--fc-red-10-rgb'),
          1100: withOpacityValue('--fc-red-11-rgb'),
          1200: withOpacityValue('--fc-red-12-rgb'),
        },
        orange: {
          100: 'var(--fc-orange-1)',
          200: 'var(--fc-orange-2)',
          300: 'var(--fc-orange-3)',
          400: 'var(--fc-orange-4)',
          500: 'var(--fc-orange-5)',
          600: 'var(--fc-orange-6)',
          700: 'var(--fc-orange-7)',
          800: 'var(--fc-orange-8)',
          900: withOpacityValue('--fc-orange-9-rgb'),
          1000: withOpacityValue('--fc-orange-10-rgb'),
          1100: withOpacityValue('--fc-orange-11-rgb'),
          1200: withOpacityValue('--fc-orange-12-rgb'),
        },
        yellow: {
          100: 'var(--fc-yellow-1)',
          200: 'var(--fc-yellow-2)',
          300: 'var(--fc-yellow-3)',
          400: 'var(--fc-yellow-4)',
          500: 'var(--fc-yellow-5)',
          600: 'var(--fc-yellow-6)',
          700: 'var(--fc-yellow-7)',
          800: 'var(--fc-yellow-8)',
          900: withOpacityValue('--fc-yellow-9-rgb'),
          1000: withOpacityValue('--fc-yellow-10-rgb'),
          1100: withOpacityValue('--fc-yellow-11-rgb'),
          1200: withOpacityValue('--fc-yellow-12-rgb'),
        },
        green: {
          100: 'var(--fc-green-1)',
          200: 'var(--fc-green-2)',
          300: 'var(--fc-green-3)',
          400: 'var(--fc-green-4)',
          500: 'var(--fc-green-5)',
          600: 'var(--fc-green-6)',
          700: 'var(--fc-green-7)',
          800: 'var(--fc-green-8)',
          900: withOpacityValue('--fc-green-9-rgb'),
          1000: withOpacityValue('--fc-green-10-rgb'),
          1100: withOpacityValue('--fc-green-11-rgb'),
          1200: withOpacityValue('--fc-green-12-rgb'),
        },
        primary: withOpacityValue('--fc-fill-primary-rgb'),
        success: withOpacityValue('--fc-fill-success-rgb'),
        warning: withOpacityValue('--fc-fill-warning-rgb'),
        alert: withOpacityValue('--fc-fill-alert-rgb'),
        error: withOpacityValue('--fc-fill-error-rgb'),
        antd: 'var(--fc-antd-border-color)',
        // use for background
        'primary-pale': '#F0ECF9',
        // use for border
        'primary-light': '#DAC7FF',
        ant: '#D9D9D9',
        'card-border': 'var(--fc-card-border)',
      },
      backgroundImage: {
        'gradient-offer': 'linear-gradient(28deg, #7438d0 0%, #6437d0 36%, #6437ce 57%, #5148ce 100%)',
      },
      boxShadow: {
        mf: 'rgba(0, 0, 0, 0.09) 0px 3px 12px',
      },
      transitionProperty: {
        width: 'width',
        height: 'height',
        spacing: 'margin, padding',
      },
      fontFamily: {
        default: ['Inter UI', 'PingFangSC-Regular', 'microsoft yahei ui', 'microsoft yahei', 'simsun', 'sans-serif'],
        // 粗体需要使用 font-bolder 类名，而不是这里定义的 font-bold-family
        'bold-family': ['PingFangSC-Medium', 'Microsoft YaHei Bold'],
      },
    },
    textColor: (theme) => ({
      ...theme('colors'),
      title: 'var(--fc-text-1)',
      main: 'var(--fc-text-2)',
      hint: 'var(--fc-text-3)',
      soft: 'var(--fc-text-4)',
      disable: 'var(--fc-text-5)',
      link: 'var(--fc-text-link)',
      placeholder: 'var(--fc-text-placeholder)',
    }),
    screens: {
      xs: '320px',
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      xl2: '1440px',
      '2xl': '1536px',
      '3xl': '1680px',
      '4xl': '1920px',
    },
    fontSize: {
      sm: ['12px', '18px'],
      base: ['12px', '22px'],
      l1: ['14px', '22px'],
      l2: ['16px', '24px'],
      l3: ['18px', '28px'],
      l4: ['24px', '36px'],
      l5: ['28px', '42px'],
      l6: ['32px', '48px'],
      l7: ['36px', '54px'],
    },
  },
};