ieplus-app/tailwind.config.js

/** @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 generateSize(size, unit) {
  const result = {};
  for (let i = 0; i <= size; i++) {
    result[`${i}`] = `${i}${unit}`;
  }
  return result;
}

function genSimpleColorsName(names) {
  const colors = {};
  names.forEach(name => {
    colors[name] = `var(--${name}-color)`
  });
  return colors
}

module.exports = {
  // separator: '__', // 如果是小程序项目需要设置这一项，将 : 选择器替换成 __，之后 hover:bg-red-500 将改为 hover__bg-red-500
  corePlugins: {
    // 预设样式
    preflight: false, // 一般uniapp都有预设样式，所以不需要tailwindcss的预设

    // 以下功能小程序不支持
    // space: false, // > 子节点选择器
    // divideWidth: false,
    // divideColor: false,
    // divideStyle: false,
    // divideOpacity: false,
  },
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  safelist: [
    { pattern: /grid-cols-[1-9]/ }
  ],
  theme: {
    spacing(config) {
      let result = { 0: '0', 'px': '0.5px' }
      // 允许的数值大一些也无所谓，最后打包tailwindcss会摇树优化，未使用的样式并不会打包
      for (let i = 1; i <= 400; i++) {
        result[i] = `${i}rpx`
      }
      return result
    },
    extend: {
      // 圆角
      borderRadius: generateSize(50, 'px'),
      // 行高
      lineHeight: generateSize(375, 'rpx'),
      // 字间距
      letterSpacing: generateSize(20, 'rpx'),
      // 旋转
      rotate: generateSize(180, 'deg'),
      zIndex: generateSize(100, ''),
      fontSize: {
        "base": '15px',
        "sm": '14px',
        "xs": '13px',
        "2xs": '12px',
        "3xs": '11px',
        "4xs": '10px',
        "lg": '16px',
        'xl': '18px',
        '2xl': '20px',
        '3xl': '24px',
        '4xl': '28px',
        '5xl': '32px',
        '6xl': '36px',
        '7xl': '40px',
        ...generateSize(70, 'rpx'),
      },
      colors: {
        primary: genSimilarColorsName('primary'),
        success: genSimilarColorsName('success'),
        warning: genSimilarColorsName('warning'),
        error: genSimilarColorsName('error'),
        info: genSimilarColorsName('info'),
        ...genSimpleColorsName(['main', 'content', 'tips', 'light', 'bg', 'disabled']),
        // 只添加部分颜色，防止覆盖掉老颜色
        fore: {
          title: "var(--fore-title)",
          subtitle: "var(--fore-subtitle)",
          content: "var(--fore-content)",
          subcontent: "var(--fore-subcontent)",
          tip: "var(--fore-tip)",
          'tip-light': "var(--fore-tip-light)",
          light: "var(--fore-light)",
          disabled: "var(--fore-disabled)",
          placeholder: "var(--fore-placeholder)",
        },
        back: {
          DEFAULT: "var(--back)",
          light: "var(--back-light)",
        },
        border: {
          DEFAULT: "var(--border)",
        },
        danger: {
          DEFAULT: "var(--danger)",
          dark: "var(--danger-dark)",
          disabled: "var(--danger-disabled)",
          light: "var(--danger-light)",
        }
      },
      // borderWidth: {
      //   DEFAULT: '0.5px',
      //   1: '1px'
      // },
      backgroundImage: {
        'register-bright': "url('/static/personal/top_bg.png')"
      },
      boxShadow: {
        'up': '0 -1px 3px 0 rgb(0 0 0 / 0.1), 0 -1px 2px -1px rgb(0 0 0 / 0.1)'
      },
      flex: {
        2: '2',
        3: '3',
        4: '4',
        5: '5',
        6: '6',
        7: '7',
        8: '8',
        9: '9',
        10: '10'
      }
    },
  },
  plugins: [],
}