ieplus-app/tailwind.config.js

/** @type {import('tailwindcss').Config} */

function generateSize(size, unit) {
  const result = {};
  for (let i = 0; i <= size; i++) {
    result[`${i}`] = `${i}${unit}`;
  }
  return result;
}

module.exports = {
  plugins: [],
  corePlugins: {
    container: false,
    preflight: false,
  },
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  safelist: [{ pattern: /grid-cols-[1-9]/ }],
  theme: {
    // 间距
    spacing: {
      ...generateSize(500, "rpx"),
    },
    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: {
        transparent: "transparent",
        primary: {
          DEFAULT: "var(--primary-color)",
          50: "var(--primary-color-50)",
          100: "var(--primary-color-100)",
          200: "var(--primary-color-200)",
          300: "var(--primary-color-300)",
          400: "var(--primary-color-400)",
          500: "var(--primary-color-500)",
          600: "var(--primary-color-600)",
          700: "var(--primary-color-700)",
          800: "var(--primary-color-800)",
          900: "var(--primary-color-900)",
          950: "var(--primary-color-950)",
          light: "var(--primary-light-color)",
        },
        warning: {
          DEFAULT: "var(--warning)",
          dark: "var(--warning-dark)",
          disabled: "var(--warning-disabled)",
          light: "var(--warning-light)",
        },
        success: {
          DEFAULT: "var(--success)",
          dark: "var(--success-dark)",
          disabled: "var(--success-disabled)",
          light: "var(--success-light)",
        },
        danger: {
          DEFAULT: "var(--danger)",
          dark: "var(--danger-dark)",
          disabled: "var(--danger-disabled)",
          light: "var(--danger-light)",
        },
        // 只添加部分颜色，防止覆盖掉老颜色
        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)",
          light: "var(--border-light)",
        },
        danger: {
          DEFAULT: "var(--danger)",
          dark: "var(--danger-dark)",
          disabled: "var(--danger-disabled)",
          light: "var(--danger-light)",
        },
      },
      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",
      },
    },
  },
};