dz-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 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: [
        './pages/**/*.{vue,js,ts,jsx,tsx}',
        './components/**/*.{vue,js,ts,jsx,tsx}',
        './main.js',
        './App.vue',
        './index.html'
    ],
    safelist: [
        {pattern: /grid-cols-[1-9]/}
    ],
    theme: {
        spacing(config) {
            let result = {0: '0', 'px': '0.5px'}
            // 允许的数值大一些也无所谓，最后打包tailwindcss会摇树优化，未使用的样式并不会打包
            for (let i = 1; i <= 300; i++) {
                result[i] = `${i}rpx`
            }
            return result
        },
        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'
        },
        extend: {
            colors: {
                primary: genSimilarColorsName('primary'),
                success: genSimilarColorsName('success'),
                warning: genSimilarColorsName('warning'),
                error: genSimilarColorsName('error'),
                info: genSimilarColorsName('info'),
                ...genSimpleColorsName(['main', 'content', 'tips', 'light', 'border', 'bg', 'disabled'])
            },
            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: [],
}