const themeConfig = {
    colors: {
        'primary': '#7356f6',
        'primary-bg': '#f6f6f6',
        'active': '#FFE0E0',
        'primary-red': '#F5222D',
        'primary-red-70': 'rgba(245,34,45,0.7)',
    },
    widths: {

    }
}

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './index.html',
        './src/**/*.{mjs,js,ts,jsx,tsx,html,vue}'
    ],
    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,
            }
        },
        screens: {
            sm: '768px',
            md: '1024px',
            lg: '1200px',
            xl: '1440px',
        }
    },
    plugins: [],
}