tailwind.config.js

module.exports = {
    content: ['./src/**/*.html', './src/**/*.css', './src/**/*.ts*'],
    darkMode: 'class', // or 'media' or 'class'
    theme: {
        fontSize: {
            xxs: '.5rem',
            xs: '.625rem',
            sm: '.75rem',
            base: '.875rem',
            lg: '1rem',
            xl: '1.125rem',
            '2xl': '1.25rem',
            '3xl': '1.5rem',
            '4xl': '1.875rem',
            '5xl': '2.25rem',
            '6xl': '3rem',
            '7xl': '4rem',
        },
        extend: {
            boxShadow: {
                DEFAULT: '0px 1px 2px rgba(184, 184, 208, 0.28), 0px 4px 8px rgba(131, 131, 165, 0.07)',
                '3xl': '0px 1px 2px rgba(184, 184, 208, 0.28), 0px 20px 28px rgba(131, 131, 165, 0.12)',
                input: 'inset 0 0px 0px 1px #2463eb',
                inputError: 'inset 0 0px 0px 1px #dc2626',
                '3xl-dark': '0px 1px 2px rgba(0, 0, 0, 0.18), 0px 12px 24px rgba(0, 0, 0, 0.13)',
            },
            colors: {
                bluegray: {
                    1: '#647DA1',
                    2: '#576F93',
                    3: '#3D5271',
                    4: '#D0CDE4',
                    5: '#42425A',
                    6: '#38384C',
                    7: '#242434',
                    8: '#1A1A28',
                },
                'slate-200/60-solid': '#EBEFF5',
            },
            cursor: {
                grab: 'grab',
                grabbing: 'grabbing',
            },
        },
    },
    plugins: [require('@tailwindcss/line-clamp'), require('tailwindcss-interaction-variants')],
};