tailwind.config.cjs

function pxToRem(variable) {
    return `${variable / 75}rem`;
}

function pxToVmin(variable) {
    return `${variable / 7.5}vmin`;
}

module.exports = {
    // 手动切换暗黑模式
    darkMode: 'class',
    // tailwind 的应用范围
    content: ['./index.html', './src/**/*.{vue,js}'],
    theme: {
        extend: {
            fontSize: {
                xs: ['0.25rem', '0.35rem'],
                sm: ['0.35rem', '0.45rem'],
                base: ['0.42rem', '0.52rem'],
                lg: ['0.55rem', '0.65rem'],
                xl: ['0.65rem', '0.75rem'],
            },
            boxShadow: {
                'l-white': '-10px 0 10px white',
                'l-zinc': '-10px 0 10px #18181b',
            },
            height: {
                header: '72px',
                main: 'calc(100vh - 72px)',
            },
            objectPosition: {
                // pcenter: {}
            },
            colors: {
                main: '#f44c48',
                'hover-main': '#f32836',
                'success-100': '#F2F9EC',
                'success-200': '#E4F2DB',
                'success-300': '#7EC050',
                'warn-100': '#FCF6ED',
                'warn-200': '#F8ECDA',
                'warn-300': '#DCA550',
                'error-100': '#ED7456',
                'error-200': '#f3471c',
                'error-300': '#ffffff',
            },

            variants: {
                scrollbar: ['dark'],
            },
            backdropBlur: {
                '4xl': '240px',
            },
        },
    },
    plugins: [require('tailwind-scrollbar')],
};