const plugin = require("tailwindcss/plugin");

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./components/**/*.{vue,js}", "./layouts/**/*.vue", "./pages/**/*.vue", "./plugins/**/*.{js,ts}"],
    theme: {
        colors: {
            white: "var(--color-white)",
            black: "var(--el-color-black)",
            primary: {
                DEFAULT: "var(--el-color-primary)",
                "light-1": "var(--el-color-primary-light-1)",
                "light-2": "var(--el-color-primary-light-2)",
                "light-3": "var(--el-color-primary-light-3)",
                "light-4": "var(--el-color-primary-light-4)",
                "light-5": "var(--el-color-primary-light-5)",
                "light-6": "var(--el-color-primary-light-6)",
                "light-7": "var(--el-color-primary-light-7)",
                "light-8": "var(--el-color-primary-light-8)",
                "light-9": "var(--el-color-primary-light-9)",
                "dark-2": "var(--el-color-primary-dark-2)",
            },
            success: "var(--el-color-success)",
            warning: "var(--el-color-warning)",
            danger: "var(--el-color-danger)",
            error: "var(--el-color-error)",
            info: "var(--el-color-info)",
            body: "var(--el-bg-color)",
            page: "var(--el-bg-color-page)",
            "tx-primary": "var(--text-color-primary)",
            "tx-regular": "var(--el-text-color-regular)",
            "tx-secondary": "var(--el-text-color-secondary)",
            "tx-placeholder": "var(--el-text-color-placeholder)",
            "tx-disabled": "var(--el-text-color-disabled)",
            br: "var(--el-border-color)",
            "br-light": "var(--el-border-color-light)",
            "br-extra-light": "var(--el-border-color-extra-light)",
            "br-dark": "var( --el-border-color-dark)",
            fill: "var(--el-fill-color)",
            mask: "var(--el-mask-color)",
            overlay: "var(--el-overlay-color-light)",
            minor: "var(--color-minor)",
            "btn-text": "var(--color-btn-text, white)",
            "gray-50": "var(--gray-50)",
            "gray-100": "var(--gray-100)",
            "gray-200": "var(--gray-200)",
            "gray-300": "var(--gray-300)",
            "gray-400": "var(--gray-400)",
            "gray-500": "var(--gray-500)",
            "gray-600": "var(--gray-600)",
            "gray-700": "var(--gray-700)",
            "gray-750": "var(--gray-750)",
            "gray-800": "var(--gray-800)",
            "gray-900": "var(--gray-900)",
            "gray-950": "var(--gray-950)",
            "black/5": "rgba(0,0,0,0.5)",
            redbook: "var(--color-redbook)",
        },
        fontFamily: {
            sans: ["PingFang SC", "Arial", "Hiragino Sans GB", "Microsoft YaHei", "sans-serif"],
        },
        boxShadow: {
            DEFAULT: "var(--el-box-shadow)",
            light: "var(--el-box-shadow-light)",
            lighter: "var(--el-box-shadow-lighter)",
            dark: "var(--el-box-shadow-dark)",
        },
        fontSize: {
            xs: "var(--el-font-size-extra-small)",
            sm: "var(--el-font-size-small)",
            base: "var(--el-font-size-base)",
            lg: "var(--el-font-size-medium)",
            xl: "var(--el-font-size-large)",
            "2xl": "var(--el-font-size-extra-large)",
            "3xl": "20px",
            "4xl": "24px",
            "5xl": "28px",
            "6xl": "30px",
            "7xl": "36px",
            "8xl": "48px",
            "9xl": "60px",
        },
        lineClamp: {
            1: "1",
            2: "2",
            3: "3",
            4: "4",
            5: "5",
            6: "6",
            7: "7",
            8: "8",
            9: "9",
        },
    },
};