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: {
            borderWidth: generateSize(100, "rpx"),
            // 圆角
            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)",
                },
                info: {
                    DEFAULT: "var(--info)"
                },
                // 只添加部分颜色，防止覆盖掉老颜色
                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",
            },
        },
    },
};