nuxt3-admin/tailwind.config.ts at main · reeswell/nuxt3-admin · 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
import type { Config } from 'tailwindcss'

// 生成颜色css变量名
function genColorsName(type: string) {
  return {
    lighter: `var(--${type}-lighter-color)`,
    light: `var(--${type}-light-color)`,
    DEFAULT: `var(--${type}-color)`,
    deep: `var(--${type}-deep-color)`,
    deeper: `var(--${type}-deeper-color)`,
  }
}

export default <Partial<Config>>{
  darkMode: 'class',
  content: [
    './components/**/*.{vue,js,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './composables/**/*.{js,ts}',
    './plugins/**/*.{js,ts}',
    './App.{js,ts,vue}',
    './app.{js,ts,vue}',
    './Error.{js,ts,vue}',
    './error.{js,ts,vue}',
  ],
  theme: {
    extend: {
      colors: {
        white: '#fff',
        black: '#333',
        transparent: 'transparent',
        // 直接使用css变量
        primary: genColorsName('primary'),
        info: genColorsName('info'),
        success: genColorsName('success'),
        warning: genColorsName('warning'),
        danger: genColorsName('danger'),

        background: 'var(--el-bg-color)',
        secondary: 'var(--el-text-color-secondary)',
        active: 'var(--el-fill-color)',
      },
      backgroundColor: {
        'dark-primary': '#0f0f0f',
        'dark-secondary': '#1a1a1a',
        'dark-tertiary': '#2a2a2a',
        'dark-quaternary': '#404040',
      },
      textColor: {
        'dark-primary': '#ffffff',
        'dark-secondary': '#f0f0f0',
        'dark-tertiary': '#c0c0c0',
        'dark-quaternary': '#909399',
      },
      borderColor: {
        'dark-primary': '#404040',
        'dark-secondary': '#2a2a2a',
        'dark-tertiary': '#1a1a1a',
      },
    },
  },
  corePlugins: {
    preflight: false,
  },
}