/** @type {import('tailwindcss').Config} */
module.exports = {
    important: '.awt-wrapper',
    content: [
        "./src/**/*.{js,jsx}",
        "./*.php",
        "./src/**/*.php",
        "./src/**/*.js",
        "./includes/**/*.php",
        "./patterns/**/*.php",
        "./elementor-widgets/**/*.php"
    ],
    theme: {
        extend: {
            fontFamily: {
                'sans': ['var(--awt-font-sans)', 'sans-serif'],
                'inter': ['var(--awt-font-inter)', 'sans-serif'],
                'serif': ['var(--awt-font-serif)', 'serif'],
            },
            colors: {
                'cream': 'var(--awt-color-cream)',
                'navy': 'var(--awt-color-navy)',
                'yellow-sun': 'var(--awt-color-yellow-sun)',
                'blue-sky': 'var(--awt-color-blue-sky)',
                'coral-pop': 'var(--awt-color-coral-pop)',
                'primary': 'var(--awt-color-primary)',
                'secondary': 'var(--awt-color-secondary)',
                'accent': 'var(--awt-color-accent)',
                'paper': 'var(--awt-color-paper)',
            },
            rotate: {
                '-2': '-2deg',
                '2': '2deg',
            },
            screens: {
                'sm': '640px',
                'md': '768px',
                'lg': '1024px',
                'xl': '1280px',
                '2xl': '1400px',
            }
        },
    },

    corePlugins: {
        container: false,
        //preflight: false,
    },

    plugins: [
        function ({ addComponents }) {
            addComponents({
                '.awt-container': {
                    width: '100%',
                    marginLeft: 'auto',
                    marginRight: 'auto',
                    paddingLeft: '1.5rem',
                    paddingRight: '1.5rem',
                    maxWidth: '100%',

                    '@screen sm': { maxWidth: '640px' },
                    '@screen md': { maxWidth: '768px' },
                    '@screen lg': { maxWidth: '1024px' },
                    '@screen xl': { maxWidth: '1280px' },
                    '@screen 2xl': { maxWidth: '1400px' },
                }
            })
        }
    ]
}