const themeConfig = {
    colors:{
        'primary':'#7356f6',
        'primary-blue':'rgb(64, 150, 255)',
        'primary-blue-bg':'#d9eaff',
        'primary-bg': 'rgb(244, 247, 252)',
        'info':'rgba(238, 245, 255, 1)',
        'news-to-edit':'#ececec',

        'active': '#FFE0E0',
        'primary-red':'#F5222D',
        'primary-red-70':'rgba(245,34,45,0.7)',

        'popconfirm-bg':'#ff5C5C',
        'popconfirm-btn-primary-hover':'#f15656',
        'popconfirm-btn-cancel':'#818181',
        'popconfirm-btn-cancel-hover':'rgba(71, 71, 71, 1)',
    },
    widths:{
        'chat-avatar-size': '32px',
        'chat-container-width':'1000px',
    }
}

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './index.html',
        './src/**/*.{mjs,js,ts,jsx,tsx,html}'
    ],
    theme: {
        extend: {
            width: {
                '396px': '396px',
                '1200px': '1200px',
                '1000px': '1000px',
                'chat-input':'800px',
                ...themeConfig.widths,
            },
            margin:{
                ...themeConfig.widths,
            },
            padding: {
                'basic': '20px',
                ...themeConfig.widths,
            },
            color:{
                ...themeConfig.colors,
            },
            borderColor:{
                ...themeConfig.colors,
            },
            backgroundColor: {
                ...themeConfig.colors,
            },
            textColor: {
                ...themeConfig.colors,
            }
        },
        screens: {
            sm: '768px',
            md: '1024px',
            lg: '1200px',
            xl: '1440px',
        }
    },
    plugins: [],
}