tailwind.config.ts

import type { Config } from "tailwindcss";

const config: Config = {
	darkMode: ["class"],
	content: [
		"./pages/**/*.{js,ts,jsx,tsx,mdx}",
		"./components/**/*.{js,ts,jsx,tsx,mdx}",
		"./app/**/*.{js,ts,jsx,tsx,mdx}",
	],
	prefix: "",
	theme: {
		container: {
			center: true,
			padding: '2rem',
			screens: {
				'2xl': '1400px'
			}
		},
		extend: {
			backgroundImage: {
				'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
				'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
			},
			colors: {
				'df-yellow': '#e9ac2d',
				'df-gray': '#f5f5f5'
			},
			fontFamily: {
				avenir: [
					'var(--font-metropolis)'
				]
			},
			keyframes: {
				'accordion-down': {
					from: {
						height: '0'
					},
					to: {
						height: 'var(--radix-accordion-content-height)'
					}
				},
				'accordion-up': {
					from: {
						height: 'var(--radix-accordion-content-height)'
					},
					to: {
						height: '0'
					}
				},
				'fadeInUp': {
					'0%': {
						opacity: '0',
						transform: 'translateY(100px)'
					},
					'100%': {
						opacity: '1',
						transform: 'translateY(0)'
					}
				},
				'fadeOutDown': {
					'0%': {
						opacity: '1',
						transform: 'translateY(0)'
					},
					'100%': {
						opacity: '0',
						transform: 'translateY(100px)'
					}
				},
				'slideUp': {
					from: {
						height: '0',
					},
					to: {
						height: 'var(--product-filter-modal-height)'
					}
				},
				'slideDown': {
					from: {
						height: 'var(--product-filter-modal-height)'
					},
					to: {
						height: '0'
					}
				}
			},
			animation: {
				'accordion-down': 'accordion-down 0.2s ease-out',
				'accordion-up': 'accordion-up 0.2s ease-out',
				'fade-in-up': 'fadeInUp 0.7s ease-out forwards',
				'fade-out-down': 'fadeOutDown 0.7s ease-in forwards',
				'slide-up': 'slideUp 0.5s ease-out forwards',
				'slide-down': 'slideDown 0.5s ease-in forwards'
			}
		}
	},
	plugins: [
		require('tailwind-scrollbar-hide'),
		require("tailwindcss-animate"),
		require('@tailwindcss/forms')
	],
} satisfies Config;
export default config;