VITE_OUTPUT_DIR

wujingjing

2025-04-10 8aa7ffddc511138d61d64029157c11cfccc5431d

 tailwind.config.js

@@ -12,12 +12,12 @@
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})`;
      if (opacityValue === undefined) {
         return `rgb(var(${variable}))`;
      }
      return `rgba(var(${variable}), ${opacityValue})`;
   };
  }
}

export default {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
@@ -44,24 +44,53 @@
   //   },
   theme: {
      extend: {
        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")],
         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')],
};