tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
    // 使用 "class" 模式时，Tailwind 会将 "dark" 类添加到根元素（通常是 <body> 元素）上，以指示页面当前处于深色模式
    darkMode: 'class',
    // 通过配置 content，Tailwind CSS 将会检索和构建包含需要的 CSS 样式的文件，并生成最终的 CSS 输出文件
    content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
    theme: {
        screens: {
            xs: '480px',
            sm: '576px',
            md: '768px',
            lg: '992px',
            xl: '1200px',
            '2xl': '1600px',
        },
        colors: {
            black: '#000000',
            green: '#00A76F',
            blue: '#1fb6ff',
            purple: '#7e5bef',
            pink: '#ff49db',
            orange: '#ff7849',
            yellow: '#ffc82c',
            gray: '#637381',
            hover: '#63738114',

            success: '#22c55e',
            warning: '#ff7849',
            error: '#ff5630',
            info: '#00b8d9',

            code: '#d63384',

            'gray-100': '#F9FAFB',
            'gray-200': '#F4F6F8',
            'gray-300': '#DFE3E8',
            'gray-400': '#C4CDD5',
            'gray-500': '#F9FAFB',
            'gray-600': '#637381',
            'gray-700': '#454F5B',
            'gray-800': '#212B36',
            'gray-900': '#161C24',
        },
        extend: {
            transitionProperty: {
                height: 'height',
            },
            animation: {
                'spin-slow': 'spin 8s linear infinite',
            },
        },
    },
    corePlugins: {
        // Remove the Tailwind CSS preflight styles so it can use custom base style (src/theme/base.css)
        preflight: false, // https://tailwindcss.com/docs/preflight#disabling-preflight
    },
    plugins: [],
};