const plugin = require('tailwindcss/plugin')

module.exports = {
	purge: [
	    './resources/**/*.blade.php',
	    './resources/**/*.js',
	    './resources/**/*.vue',
	],
    darkMode: false, // or 'media' or 'class'
    theme: {
		screens: {
			'sm': '640px',
			'md': '768px',
			'lg': '1024px',
			'xl': '1280px'
		},
		container: {
			padding: '1rem'
		},
        extend: {
			scale: {
				'-1' : '-1',
			}
        },
    },
    variants: {
        extend: {},
    },
    plugins: [
		plugin(function({ addUtilities }) {
			const newUtilities = {
				'.rotate-y-0': {
					transform: 'rotateY(0deg)'
				},
				'.rotate-y-180': {
					transform: 'rotateY(180deg)'
				},
				'.transform-style-3d': {
					transformStyle: 'preserve-3d'
				},
				'.backface-hidden': {
					backfaceVisibility: 'hidden'
				},
				'.perspective': {
					perspective: '400px'
				}
			}

			addUtilities(newUtilities, {
				variants: ['hover'],
			})
		})
	],
}