z-index: 1;

wujingjing

2025-03-21 6e09e21b98b487621e7f19e1b91012a0e9e617ed

 tailwind.config.js

@@ -1,4 +1,24 @@
/** @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: {
@@ -7,6 +27,70 @@
      // 2）i 标签 display 修改，导致布局错误；3）border 颜色默认值不是黑色
      preflight: false,
   },
   theme: {},
   plugins: [require("@tailwindcss/typography")],
   // 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')],
};