const config = require('../../../dashboard/tailwind.config');

module.exports = {
	content: ['./jcloude/templates/emails/*.html'],
	important: true,
	theme: Object.assign(config.theme, {
		screens: {
			sm: { max: '600px' },
		},
		fontFamily: {
			sans: ['-apple-system', '"Segoe UI"', 'sans-serif'],
			serif: ['Constantia', 'Georgia', 'serif'],
			mono: ['Menlo', 'Consolas', 'monospace'],
		},
	}),
	corePlugins: {
		accessibility: false,
		container: false,
		transitionProperty: false,
		transitionDuration: false,
		transitionTimingFunction: false,
		scale: false,
		rotate: false,
		translate: false,
		skew: false,
		transformOrigin: false,
		gridTemplateColumns: false,
		gridColumn: false,
		gridColumnStart: false,
		gridColumnStartEnd: false,
		gridTemplateRows: false,
		gridRow: false,
		gridRowStart: false,
		gridRowEnd: false,
		gap: false,
		gridAutoFlow: false,
		flex: false,
		flexDirection: false,
		flexGrow: false,
		flexShrink: false,
		flexWrap: false,
		backgroundOpacity: false,
		textOpacity: false,
	},
	variants: {
		alignContent: ['responsive'],
		alignItems: ['responsive'],
		alignSelf: ['responsive'],
		appearance: [],
		backgroundAttachment: ['responsive'],
		backgroundColor: ['responsive', 'hover'],
		backgroundPosition: ['responsive'],
		backgroundRepeat: ['responsive'],
		backgroundSize: ['responsive'],
		borderCollapse: [],
		borderColor: ['responsive', 'hover'],
		borderRadius: ['responsive', 'hover'],
		borderStyle: ['responsive', 'hover'],
		borderWidth: ['responsive', 'hover'],
		boxShadow: ['responsive', 'hover'],
		boxSizing: ['responsive'],
		cursor: [],
		display: ['responsive'],
		fill: [],
		flex: ['responsive'],
		flexDirection: ['responsive'],
		flexGrow: ['responsive'],
		flexShrink: ['responsive'],
		flexWrap: ['responsive'],
		float: ['responsive'],
		clear: ['responsive'],
		fontFamily: ['responsive'],
		fontSize: ['responsive'],
		fontSmoothing: ['responsive'],
		fontStyle: ['responsive'],
		fontWeight: ['responsive', 'hover'],
		height: ['responsive'],
		inset: ['responsive'],
		justifyContent: ['responsive'],
		letterSpacing: ['responsive'],
		lineHeight: ['responsive'],
		listStylePosition: ['responsive'],
		listStyleType: ['responsive'],
		margin: ['responsive'],
		maxHeight: ['responsive'],
		maxWidth: ['responsive', 'hover'],
		minHeight: ['responsive'],
		minWidth: ['responsive'],
		objectFit: ['responsive'],
		objectPosition: ['responsive'],
		opacity: ['responsive', 'hover'],
		order: ['responsive'],
		outline: ['responsive', 'focus'],
		overflow: ['responsive'],
		padding: ['responsive'],
		placeholderColor: ['responsive', 'focus'],
		pointerEvents: [],
		position: ['responsive'],
		resize: [],
		stroke: [],
		strokeWidth: [],
		tableLayout: ['responsive'],
		textAlign: ['responsive'],
		textColor: ['responsive', 'hover', 'group-hover'],
		textDecoration: ['responsive', 'hover'],
		textTransform: ['responsive'],
		userSelect: ['responsive'],
		verticalAlign: ['responsive'],
		visibility: ['responsive', 'group-hover'],
		whitespace: ['responsive'],
		width: ['responsive'],
		wordBreak: ['responsive'],
		zIndex: ['responsive'],
		gap: ['responsive'],
		gridAutoFlow: ['responsive'],
		gridTemplateColumns: ['responsive'],
		gridColumn: ['responsive'],
		gridColumnStart: ['responsive'],
		gridColumnEnd: ['responsive'],
		gridTemplateRows: ['responsive'],
		gridRow: ['responsive'],
		gridRowStart: ['responsive'],
		gridRowEnd: ['responsive'],
		transform: ['responsive'],
		transformOrigin: ['responsive'],
		scale: ['responsive', 'hover'],
		rotate: ['responsive', 'hover'],
		translate: ['responsive', 'hover'],
		skew: ['responsive', 'hover'],
		transitionProperty: ['responsive'],
		transitionTimingFunction: ['responsive'],
		transitionDuration: ['responsive'],
	},
};