tailwind.config.js

/** @type {import('tailwindcss').Config} */

export default {
	future: {
		hoverOnlyWhenSupported: true,
	},
	content: [
		"./index.html",
		"./src/pages/**/*.tsx",
		"./src/components/**/*.tsx",
	],
	theme: {
		colors: {
			accent: "#FBCE8D",
			"menu-dark": "#131A34",
			"menu-light-bg": "#D2E5E9",
			"navItem-dark": "#1F253B",
			"DWOC-heading-dark": "#20263C",
			"userid-light": "#A4B7BB",
			"card-content-dark": "#1F1F20",
			"landing-bg-dark": "#1F253B",
			black: "#000000",
			white: "#FFFFFF",
			red: "#FF0000",
			green: "#20c20e",
			dashboardNavBg: "#1f253bda",
		},
		fontFamily: {},
		backgroundImage: {
			"landing-bg": "url(/assets/landingBG.png)",
		},
		screens: {
			se: "380px",
			sm: "640px",
			md: "836px",
			lg: "1128px",
			xl: "1280px",
		},
		extend: {
			fontFamily: {
				"montreal-bold": "Neue Montreal Bold",
				"montreal-regular": "Neue Montreal Regular",
				"montreal-light": "Neue Montreal Light",
				"montreal-medium": "Neue Montreal Medium",
				quicksand: ["Quicksand", "sans-serif"],
				poppins: ["Poppins", "sans-serif"],
				montserrat: ["Montserrat", "sans-serif"],
			},
			keyframes: {
				bounce1: {
					"0%, 100%": {
						transform: "translateX(250%)",
						animationTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
					},
					"50%": {
						transform: "none",
						animationTimingFunction: "cubic-bezier(0.8, 1, 1, 1)",
					},
				},
				bounce2: {
					"0%, 100%": {
						transform: "translateX(15%)",
						animationTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
					},
					"50%": {
						transform: "none",
						animationTimingFunction: "cubic-bezier(0.8, 1, 1, 1)",
					},
				},
			},
			animation: {
				"bounce-1": "bounce1 0.6s infinite",
				"bounce-2": "bounce2 0.6s infinite",
			},
		},
	},
	plugins: [],
};