tailwind.config.js

/** @type {import('tailwindcss').Config} */
const plugin = require('tailwindcss/plugin');

module.exports = {
	content: [
		'./components/**/*.{js,vue,ts}',
		'./layouts/**/*.vue',
		'./pages/**/*.vue',
		'./plugins/**/*.{js,ts}',
		'./nuxt.config.{js,ts}',
		'./app.vue',
	],
	darkMode: 'class',
	mode: 'jit',
	theme: {
		screens: {
			xs: '425px',
			sm: '525px',
			md: '768px',
			lg: '1024px',
			midXl: '1220px',
			xl: '1440px',
		},
		colors: {
			primary: 'var(--color-primary)',
			secondary: 'var(--color-secondary)',
			tertiary: 'var(--color-tertiary)',
			accent: 'var(--color-accent)',

			black: 'var(--color-black)',
			dark: 'var(--color-dark)',
			transparent: 'var(--color-transparent)',
			light: 'var(--color-light)',
			white: 'var(--color-white)',

			heading: 'var(--color-heading)',
			subheading: 'var(--color-subheading)',
			body: 'var(--color-body)',

			error: 'var(--color-error)',
			success: 'var(--color-success)',
			info: 'var(--color-info)',
			warning: 'var(--color-warning)',
		},
	},
	plugins: [
		plugin(function ({ addBase, addComponents, addUtilities, theme }) {
			addComponents({
				// @apply px-4 sm:px-6 md:px-8
				'.container': {
					paddingLeft: theme('spacing.4'),
					paddingRight: theme('spacing.4'),
				},
				// text-4xl md:text-5xl lg:text-6xl font-bold capitalize
				'.text-display-1': {
					fontSize: theme('fontSize.body'),
					textTransform: 'capitalize',
					fontWeight: theme('fontWeight.bold'),
					'@media (min-width: 768px)': {
						fontSize: theme('fontSize.5xl'),
					},
					'@media (min-width: 1024px)': {
						fontSize: theme('fontSize.6xl'),
					},
				},
				// text-3xl md:text-4xl lg:text-5xl font-bold capitalize;
				'.text-display-2': {
					fontSize: theme('fontSize.3xl'),
					textTransform: 'capitalize',
					fontWeight: theme('fontWeight.bold'),
					'@media (min-width: 768px)': {
						fontSize: theme('fontSize.4xl'),
					},
					'@media (min-width: 1024px)': {
						fontSize: theme('fontSize.5xl'),
					},
				},
				// text-2xl md:text-3xl lg:text-4xl
				'.text-heading-1': {
					fontSize: theme('fontSize.2xl'),
					'@media (min-width: 768px)': {
						fontSize: theme('fontSize.3xl'),
					},
					'@media (min-width: 1024px)': {
						fontSize: theme('fontSize.4xl'),
					},
				},
				// mb-2 md:mb-3 xl:mb-4 text-sm md:text-base text-accent font-body;
				'.text-subheading-1': {
					fontSize: theme('fontSize.sm'),
					color: theme('colors.accent'),
					marginBottom: theme('spacing.2'),
					fontFamily: 'Space Mono',
					'@media (min-width: 768px)': {
						fontSize: theme('fontSize.base'),
						marginBottom: theme('spacing.3'),
					},
					'@media (min-width: 1440px)': {
						marginBottom: theme('spacing.4'),
					},
				},
				// text-lg md:text-xl xl:text-2xl;
				'.text-heading-2': {
					fontSize: theme('fontSize.lg'),
					'@media (min-width: 768px)': {
						fontSize: theme('fontSize.xl'),
					},
					'@media (min-width: 1024px)': {
						fontSize: theme('fontSize.2xl'),
					},
				},
				// mb-1.5 md:mb-2 xl:mb-3 text-xs md:text-sm text-accent font-body;
				'.text-subheading-2': {
					fontSize: theme('fontSize.xs'),
					color: theme('colors.accent'),
					marginBottom: theme('spacing.1.5'),
					fontFamily: 'Space Mono',
					'@media (min-width: 768px)': {
						fontSize: theme('fontSize.sm'),
						marginBottom: theme('spacing.2'),
					},
					'@media (min-width: 1440px)': {
						marginBottom: theme('spacing.3'),
					},
				},
				// text-lg md:text-xl
				'.text-heading-3': {
					fontSize: theme('fontSize.lg'),
					'@media (min-width: 768px)': {
						fontSize: theme('fontSize.xl'),
					},
				},
				// text-base md:text-lg
				'.text-heading-4': {
					fontSize: theme('fontSize.base'),
					'@media (min-width: 768px)': {
						fontSize: theme('fontSize.lg'),
					},
				},
				// text-sm
				'.text-heading-5': {
					fontSize: theme('fontSize.sm'),
				},
				// text-sm md:text-base
				'.text-body-1': {
					fontSize: theme('fontSize.sm'),
					'@media (min-width: 768px)': {
						fontSize: theme('fontSize.base'),
					},
				},
				// text-xs md:text-sm
				'.text-body-2': {
					fontSize: theme('fontSize.xs'),
					'@media (min-width: 768px)': {
						fontSize: theme('fontSize.sm'),
					},
				},
				// p-2 xl:p-4
				'.box': {
					padding: theme('spacing.2'),
					'@media (min-width: 1440px)': {
						padding: theme('spacing.4'),
					},
				},
				// p-3 md:p-4 xl:p-6
				'.card-sm': {
					padding: theme('spacing.3'),
					'@media (min-width: 768px)': {
						padding: theme('spacing.4'),
					},
					'@media (min-width: 1440px)': {
						padding: theme('spacing.6'),
					},
				},
				// p-4 md:p-6 xl:p-8
				'.card': {
					padding: theme('spacing.4'),
					'@media (min-width: 768px)': {
						padding: theme('spacing.6'),
					},
					'@media (min-width: 1440px)': {
						padding: theme('spacing.8'),
					},
				},
				// px-[5vw] sm:px-9 md:px-16 lg:px-[17.5vw] xl:px-80
				'.container': {
					margin: theme('spacing.0'),
					maxWidth: '100vw',
					paddingLeft: '5vw',
					paddingRight: '5vw',
					'@media (min-width: 425px)': {
						paddingLeft: theme('spacing.9'),
						paddingRight: theme('spacing.9'),
						maxWidth: '100vw',
					},
					'@media (min-width: 768px)': {
						paddingLeft: theme('spacing.16'),
						paddingRight: theme('spacing.16'),
						maxWidth: '100vw',
					},
					'@media (min-width: 1024px)': {
						paddingLeft: '17.5vw',
						paddingRight: '17.5vw',
						maxWidth: '100vw',
					},
					'@media (min-width: 1440px)': {
						paddingLeft: theme('spacing.80'),
						paddingRight: theme('spacing.80'),
						maxWidth: '100vw',
					},
				},
				// px-[5vw] sm:px-9 md:px-16 lg:px-32 xl:px-48
				'.container-fluid': {
					margin: theme('spacing.0'),
					maxWidth: '100vw',
					paddingLeft: '5vw',
					paddingRight: '5vw',
					'@media (min-width: 425px)': {
						paddingLeft: theme('spacing.9'),
						paddingRight: theme('spacing.9'),
						maxWidth: '100vw',
					},
					'@media (min-width: 768px)': {
						paddingLeft: theme('spacing.16'),
						paddingRight: theme('spacing.16'),
						maxWidth: '100vw',
					},
					'@media (min-width: 1024px)': {
						paddingLeft: theme('spacing.32'),
						paddingRight: theme('spacing.32'),
						maxWidth: '100vw',
					},
					'@media (min-width: 1440px)': {
						paddingLeft: theme('spacing.48'),
						paddingRight: theme('spacing.48'),
						maxWidth: '100vw',
					},
				},
				// p-0 sm:p-6 md:p-9 lg:p-12 sm:border-4 sm:border-tertiary rounded-lg h-fit w-full max-w-xl
				'.container-form': {
					padding: theme('spacing.0'),
					height: theme('height.fit'),
					width: theme('width.full'),
					maxWidth: theme('maxWidth.2xl'),
					'@media (min-width: 425px)': {
						padding: theme('spacing.6'),
						borderColor: theme('colors.tertiary'),
						borderWidth: theme('borderWidth.4'),
						borderRadius: theme('borderRadius.lg'),
					},
					'@media (min-width: 768px)': {
						padding: theme('spacing.9'),
					},
					'@media (min-width: 1024px)': {
						padding: theme('spacing.12'),
					},
				},
			});
			addUtilities({
				'.font-heading': {
					fontFamily: 'Ubuntu Mono',
				},
				'.font-body': {
					fontFamily: 'Space Mono',
				},
				'.bg-error-light': {
					// backgroundColor: '#272133',
					backgroundColor: '#eb585720',
				},
				'.bg-success-light': {
					// backgroundColor: '#0C2F3B',
					backgroundColor: '#00cc9920',
				},
				'.bg-warning-light': {
					// backgroundColor: '#282F32',
					backgroundColor: '#f2c94c20',
				},
				'.bg-info-light': {
					// backgroundColor: '#0D2543',
					backgroundColor: '#177ddc20',
				},
				// transition duration-300 ease-out
				'.transition-basic': {
					transitionProperty:
						'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
					transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
					transitionDuration: '300ms',
				},
				'.style-box': {
					boxShadow: theme('boxShadow.md'),
					borderRadius: theme('borderRadius.md'),
				},
				// gap-2 xl:gap-4
				'.gap-box': {
					gap: theme('spacing.2'),
					'@media (min-width: 1440px)': {
						gap: theme('spacing.4'),
					},
				},
				'.gap-y-box': {
					rowGap: theme('spacing.2'),
					'@media (min-width: 1440px)': {
						rowGap: theme('spacing.4'),
					},
				},
				'.gap-x-box': {
					columnGap: theme('spacing.2'),
					'@media (min-width: 1440px)': {
						columnGap: theme('spacing.4'),
					},
				},
				// mt-2 xl:mt-4
				'.mt-box': {
					marginTop: theme('spacing.2'),
					'@media (min-width: 1440px)': {
						marginTop: theme('spacing.4'),
					},
				},
				// mb-2 xl:mb-4
				'.mb-box': {
					marginBottom: theme('spacing.2'),
					'@media (min-width: 1440px)': {
						marginBottom: theme('spacing.4'),
					},
				},
				// pt-2 xl:pt-4
				'.pt-box': {
					paddingTop: theme('spacing.2'),
					'@media (min-width: 1440px)': {
						paddingTop: theme('spacing.4'),
					},
				},
				// pb-2 xl:pb-4
				'.pb-box': {
					paddingBottom: theme('spacing.2'),
					'@media (min-width: 1440px)': {
						paddingBottom: theme('spacing.4'),
					},
				},
				// top-2 xl:top-4
				'.top-box': {
					top: theme('spacing.2'),
					'@media (min-width: 1440px)': {
						top: theme('spacing.4'),
					},
				},
				// bottom-2 xl:bottom-4
				'.bottom-box': {
					bottom: theme('spacing.2'),
					'@media (min-width: 1440px)': {
						bottom: theme('spacing.4'),
					},
				},
				// left-2 xl:left-4
				'.left-box': {
					left: theme('spacing.2'),
					'@media (min-width: 1440px)': {
						left: theme('spacing.4'),
					},
				},
				// right-2 xl:right-4
				'.right-box': {
					right: theme('spacing.2'),
					'@media (min-width: 1440px)': {
						right: theme('spacing.4'),
					},
				},
				// gap-3 md:gap-4 xl:gap-6
				'.gap-card-sm': {
					gap: theme('spacing.3'),
					'@media (min-width: 768px)': {
						gap: theme('spacing.4'),
					},
					'@media (min-width: 1440px)': {
						gap: theme('spacing.6'),
					},
				},
				'.gap-y-card-sm': {
					rowGap: theme('spacing.3'),
					'@media (min-width: 768px)': {
						rowGap: theme('spacing.4'),
					},
					'@media (min-width: 1440px)': {
						rowGap: theme('spacing.6'),
					},
				},
				'.gap-x-card-sm': {
					columnGap: theme('spacing.3'),
					'@media (min-width: 768px)': {
						columnGap: theme('spacing.4'),
					},
					'@media (min-width: 1440px)': {
						columnGap: theme('spacing.6'),
					},
				},
				// mt-3 md:mt-4 xl:mt-6
				'.mt-card-sm': {
					marginTop: theme('spacing.3'),
					'@media (min-width: 768px)': {
						marginTop: theme('spacing.4'),
					},
					'@media (min-width: 1440px)': {
						marginTop: theme('spacing.6'),
					},
				},
				// mb-3 md:mb-4 xl:mb-6
				'.mb-card-sm': {
					marginBottom: theme('spacing.3'),
					'@media (min-width: 768px)': {
						marginBottom: theme('spacing.4'),
					},
					'@media (min-width: 1440px)': {
						marginBottom: theme('spacing.6'),
					},
				},
				// pt-3 md:pt-4 xl:pt-6
				'.pt-card-sm': {
					paddingTop: theme('spacing.3'),
					'@media (min-width: 768px)': {
						paddingTop: theme('spacing.4'),
					},
					'@media (min-width: 1440px)': {
						paddingTop: theme('spacing.6'),
					},
				},
				// pb-3 md:pb-4 xl:pb-6
				'.pb-card-sm': {
					paddingBottom: theme('spacing.3'),
					'@media (min-width: 768px)': {
						paddingBottom: theme('spacing.4'),
					},
					'@media (min-width: 1440px)': {
						paddingBottom: theme('spacing.6'),
					},
				},
				// top-3 md:top-4 xl:top-6
				'.top-card-sm': {
					top: theme('spacing.3'),
					'@media (min-width: 768px)': {
						top: theme('spacing.4'),
					},
					'@media (min-width: 1440px)': {
						top: theme('spacing.6'),
					},
				},
				// bottom-3 md:bottom-4 xl:bottom-6
				'.bottom-card-sm': {
					bottom: theme('spacing.3'),
					'@media (min-width: 768px)': {
						bottom: theme('spacing.4'),
					},
					'@media (min-width: 1440px)': {
						bottom: theme('spacing.6'),
					},
				},
				// left-3 md:left-4 xl:left-6
				'.left-card-sm': {
					left: theme('spacing.3'),
					'@media (min-width: 768px)': {
						left: theme('spacing.4'),
					},
					'@media (min-width: 1440px)': {
						left: theme('spacing.6'),
					},
				},
				// right-3 md:right-4 xl:right-6
				'.right-card-sm': {
					right: theme('spacing.3'),
					'@media (min-width: 768px)': {
						right: theme('spacing.4'),
					},
					'@media (min-width: 1440px)': {
						right: theme('spacing.6'),
					},
				},
				'.style-card': {
					boxShadow: theme('boxShadow.lg'),
					borderRadius: theme('borderRadius.lg'),
				},
				// gap-4 md:gap-6 xl:gap-8
				'.gap-card': {
					gap: theme('spacing.4'),
					'@media (min-width: 768px)': {
						gap: theme('spacing.6'),
					},
					'@media (min-width: 1440px)': {
						gap: theme('spacing.8'),
					},
				},
				'.gap-y-card': {
					rowGap: theme('spacing.4'),
					'@media (min-width: 768px)': {
						rowGap: theme('spacing.6'),
					},
					'@media (min-width: 1440px)': {
						rowGap: theme('spacing.8'),
					},
				},
				'.gap-x-card': {
					columnGap: theme('spacing.4'),
					'@media (min-width: 768px)': {
						columnGap: theme('spacing.6'),
					},
					'@media (min-width: 1440px)': {
						columnGap: theme('spacing.8'),
					},
				},
				// mt-4 md:mt-6 xl:mt-8
				'.mt-card': {
					marginTop: theme('spacing.4'),
					'@media (min-width: 768px)': {
						marginTop: theme('spacing.6'),
					},
					'@media (min-width: 1440px)': {
						marginTop: theme('spacing.8'),
					},
				},
				// mb-4 md:mb-6 xl:mb-8
				'.mb-card': {
					marginBottom: theme('spacing.4'),
					'@media (min-width: 768px)': {
						marginBottom: theme('spacing.6'),
					},
					'@media (min-width: 1440px)': {
						marginBottom: theme('spacing.8'),
					},
				},
				// pt-4 md:pt-6 xl:pt-8
				'.pt-card': {
					paddingTop: theme('spacing.4'),
					'@media (min-width: 768px)': {
						paddingTop: theme('spacing.6'),
					},
					'@media (min-width: 1440px)': {
						paddingTop: theme('spacing.8'),
					},
				},
				// pb-4 md:pb-6 xl:pb-8
				'.pb-card': {
					paddingBottom: theme('spacing.4'),
					'@media (min-width: 768px)': {
						paddingBottom: theme('spacing.6'),
					},
					'@media (min-width: 1440px)': {
						paddingBottom: theme('spacing.8'),
					},
				},
				// top-4 md:top-6 xl:top-8
				'.top-card': {
					top: theme('spacing.4'),
					'@media (min-width: 768px)': {
						top: theme('spacing.6'),
					},
					'@media (min-width: 1440px)': {
						top: theme('spacing.8'),
					},
				},
				// bottom-4 md:bottom-6 xl:bottom-8
				'.bottom-card': {
					bottom: theme('spacing.4'),
					'@media (min-width: 768px)': {
						bottom: theme('spacing.6'),
					},
					'@media (min-width: 1440px)': {
						bottom: theme('spacing.8'),
					},
				},
				// left-4 md:left-6 xl:left-8
				'.left-card': {
					left: theme('spacing.4'),
					'@media (min-width: 768px)': {
						left: theme('spacing.6'),
					},
					'@media (min-width: 1440px)': {
						left: theme('spacing.8'),
					},
				},
				// right-4 md:right-6 xl:right-8
				'.right-card': {
					right: theme('spacing.4'),
					'@media (min-width: 768px)': {
						right: theme('spacing.6'),
					},
					'@media (min-width: 1440px)': {
						right: theme('spacing.8'),
					},
				},
				// gap-6 sm:gap-10 md:gap-12 lg:gap-16 xl:gap-20
				// gap-4 sm:gap-6 md:gap-10 lg:gap-12 xl:gap-16
				// gap-6 sm:gap-10 md:gap-12 lg:gap-16
				'.gap-container': {
					gap: theme('spacing.6'),
					'@media (min-width: 425px)': {
						gap: theme('spacing.10'),
					},
					'@media (min-width: 768px)': {
						gap: theme('spacing.12'),
					},
					'@media (min-width: 1024px)': {
						gap: theme('spacing.16'),
					},
					// '@media (min-width: 1440px)': {
					// 	gap: theme('spacing.20'),
					// },
				},
				'.gap-y-container': {
					rowGap: theme('spacing.6'),
					'@media (min-width: 425px)': {
						rowGap: theme('spacing.10'),
					},
					'@media (min-width: 768px)': {
						rowGap: theme('spacing.12'),
					},
					'@media (min-width: 1024px)': {
						rowGap: theme('spacing.16'),
					},
					'@media (min-width: 1440px)': {
						rowGap: theme('spacing.20'),
					},
				},
				'.gap-x-container': {
					columnGap: theme('spacing.6'),
					'@media (min-width: 425px)': {
						columnGap: theme('spacing.10'),
					},
					'@media (min-width: 768px)': {
						columnGap: theme('spacing.12'),
					},
					'@media (min-width: 1024px)': {
						columnGap: theme('spacing.16'),
					},
					'@media (min-width: 1440px)': {
						columnGap: theme('spacing.20'),
					},
				},
				// mt-10 md:mt-12 lg:mt-16 xl:mt-24
				'.mt-container': {
					marginTop: theme('spacing.10'),
					'@media (min-width: 425px)': {
						marginTop: theme('spacing.10'),
					},
					'@media (min-width: 768px)': {
						marginTop: theme('spacing.12'),
					},
					'@media (min-width: 1024px)': {
						marginTop: theme('spacing.16'),
					},
					'@media (min-width: 1440px)': {
						marginTop: theme('spacing.24'),
					},
				},
				// mb-10 md:mb-12 lg:mb-16 xl:mb-24
				'.mb-container': {
					marginBottom: theme('spacing.10'),
					'@media (min-width: 425px)': {
						marginBottom: theme('spacing.10'),
					},
					'@media (min-width: 768px)': {
						marginBottom: theme('spacing.12'),
					},
					'@media (min-width: 1024px)': {
						marginBottom: theme('spacing.16'),
					},
					'@media (min-width: 1440px)': {
						marginBottom: theme('spacing.24'),
					},
				},
				// pt-6 sm:pt-10 md:pt-12 lg:pt-16 xl:pt-20
				'.pt-container': {
					paddingTop: theme('spacing.6'),
					'@media (min-width: 425px)': {
						paddingTop: theme('spacing.10'),
					},
					'@media (min-width: 768px)': {
						paddingTop: theme('spacing.12'),
					},
					'@media (min-width: 1024px)': {
						paddingTop: theme('spacing.16'),
					},
					'@media (min-width: 1440px)': {
						paddingTop: theme('spacing.20'),
					},
				},
				// pb-6 sm:pb-10 md:pb-12 lg:pb-16 xl:pb-20
				'.pb-container': {
					paddingBottom: theme('spacing.6'),
					'@media (min-width: 425px)': {
						paddingBottom: theme('spacing.10'),
					},
					'@media (min-width: 768px)': {
						paddingBottom: theme('spacing.12'),
					},
					'@media (min-width: 1024px)': {
						paddingBottom: theme('spacing.16'),
					},
					'@media (min-width: 1440px)': {
						paddingBottom: theme('spacing.20'),
					},
				},
				// top-4 sm:top-6 md:top-10 lg:top-12 xl:top-16
				'.top-container': {
					top: theme('spacing.4'),
					'@media (min-width: 425px)': {
						top: theme('spacing.6'),
					},
					'@media (min-width: 768px)': {
						top: theme('spacing.10'),
					},
					'@media (min-width: 1024px)': {
						top: theme('spacing.12'),
					},
					'@media (min-width: 1440px)': {
						top: theme('spacing.16'),
					},
				},
				// bottom-4 sm:bottom-6 md:bottom-10 lg:bottom-12 xl:bottom-16
				'.bottom-container': {
					bottom: theme('spacing.4'),
					'@media (min-width: 425px)': {
						bottom: theme('spacing.6'),
					},
					'@media (min-width: 768px)': {
						bottom: theme('spacing.10'),
					},
					'@media (min-width: 1024px)': {
						bottom: theme('spacing.12'),
					},
					'@media (min-width: 1440px)': {
						bottom: theme('spacing.16'),
					},
				},
				// left-[5vw] sm:left-9 md:left-16 lg:left-32 xl:left-48
				'.left-container': {
					left: '5vw',
					'@media (min-width: 425px)': {
						left: theme('spacing.9'),
					},
					'@media (min-width: 768px)': {
						left: theme('spacing.16'),
					},
					'@media (min-width: 1024px)': {
						left: theme('spacing.32'),
					},
					'@media (min-width: 1440px)': {
						left: theme('spacing.48'),
					},
				},
				// right-[5vw] sm:right-9 md:right-16 lg:right-32 xl:right-48
				'.right-container': {
					right: '5vw',
					'@media (min-width: 425px)': {
						right: theme('spacing.9'),
					},
					'@media (min-width: 768px)': {
						right: theme('spacing.16'),
					},
					'@media (min-width: 1024px)': {
						right: theme('spacing.32'),
					},
					'@media (min-width: 1440px)': {
						right: theme('spacing.48'),
					},
				},
			});
		}),
	],
};