const plugin = require('tailwindcss/plugin')

module.exports = {
    content: ['./build/**/*.html'],
    safelist: ['mt-12', 'mt-16', 'mt-20', 'mt-24', 'mt-32', 'mt-40', 'mb-16', 'mb-20', 'mb-24', 'mb-32', 'mb-40'],
    theme: {
        screens: {
            'sm': '40rem',
            'md': '48rem',
            'lg': '62rem',
            'xl': '80rem',
            '2xl': '120rem',
            '3xl': '128rem'
        },
        fontFamily: {
            sans: ['Standard', 'sans-serif']
        },
        fontSize: {
            'sm': ['13px', '20px'],
            'base': ['16px', '25px'],
            'md': ['20px', '30px'],
            'md-lg': ['26px', '35px'],
            'lg': ['30px', '40px'],
            'xl': ['44px', '55px'],
            'xl-md': ['40px', '50px'],
            '2xl': ['58px', '70px'],
            '2xl-md': ['54px', '65px'],
            '3xl': ['90px', '105px']
        },
        colors: {
            yellow: {
                100: '#FFCC00',
                200: '#E5B700',
                300: '#9E7F00',
                400: '#6E5800'
            },
            white: '#FFFFFF',
            grey: {
                100: '#F2F5F5',
                200: '#D3D8D8',
                300: '#6E7878',
                400: '#8D9797',
                500: '#535A5A'
            },
            black: '#000000',
            success: '#3EE976',
            warning: '#FFAC00',
            error: '#F8445A',
            transparent: 'transparent'
        },
        extend: {
            spacing: {
                '3.75': '0.9375rem',
                '6.25': '1.5625rem',
                '7.5': '1.875rem',
                '8.75': '2.1875rem',
                '12.5': '3.125rem',
                '15': '3.75rem',
                '25': '6.25rem',
                'xxs': '0.5rem',
                'xs': '1.125rem',
                'sm': '1.5625rem',
                'base': '2.5rem',
                'md': '3.125rem',
                'lg': '4.5rem',
                'xl': '7.5rem'
            },
            lineHeight: {
            }
        }
    },
    plugins: [
        plugin(function ({ addUtilities }) {
            const newUtilities = {
                '.position-center': {
                    top: '50%',
                    left: '50%',
                    transform: 'translateX(-50%) translateY(-50%)'
                },
                '.position-center-horizontal': {
                    left: '50%',
                    transform: 'translateX(-50%)'
                },
                '.position-center-vertical': {
                    top: '50%',
                    transform: 'translateY(-50%)'
                }
            }
            addUtilities(newUtilities)
        })
    ]    
}