tailwind.config.cjs

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

module.exports = {
	content: [
		"./public/**/*.html",
		"./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
		"./node_modules/flowbite/**/*.js",
	],
	plugins: [
		require("@tailwindcss/forms"),
		require("@tailwindcss/typography"),
		require("@tailwindcss/aspect-ratio"),
		require("flowbite/plugin"),
	],
	theme: {
		container: {
			center: true,
		},
		extend: {
			animation: {
				"bounce-left": "bounce-left 1s infinite;",
				"moving-background": "moving-background 5s ease-in-out",
			},
			keyframes: {
				"bounce-left": {
					"0%, 100%": {
						transform: "translateX(-25%)",
						"animation-timing-function": "cubic-bezier(0.8, 0, 1, 1)",
					},
					"50%": {
						transform: "translateX(0)",
						"animation-timing-function": "cubic-bezier(0, 0, 0.2, 1)",
					},
				},
				"moving-background": {
					"0%": {
						transform: "translateY(0)",
						opacity: 0,
					},
					"66%": {
						opacity: 0.4,
					},
					"100%": {
						transform: "translateY(-150px)",
						opacity: 0,
					},
				},
			},
			spacing: {
				80: "20rem",
				108: "27rem",
			},
			lineClamp: {
				7: "7",
				8: "8",
				9: "9",
				10: "10",
			},
			borderWidth: {
				14: "14px",
			},
			colors: {
				background: {
					primary: "#0a192f",
					secondary: "#102c44",
					tertiary: "#1e3951",

					form: "#1a202c",
				},

				copy: {
					primary: "#cbd5e0",
					secondary: "#e2e8f0",
				},

				"border-color": {
					primary: "#1a202c",
				},

				transparent: "transparent",

				black: "#000",
				white: "#fff",
				"dark-navy": "#020c1b",
				navy: "#0a192f",
				"light-navy": "#112240",
				"lightest-navy": "#233554",
				slate: "#8892b0",
				"light-slate": "#a8b2d1",
				"lightest-slate": "#ccd6f6",

				green: {
					100: "#d5f3ec",
					200: "#b4eee0",
					300: "#98efdb",
					400: "#87fde1",
					500: "#64ffda",
					600: "#4cbfa4",
					700: "#388c78",
					800: "#2b6658",
					900: "#133040",
				},

				gray: {
					100: "#f7fafc",
					200: "#edf2f7",
					300: "#e2e8f0",
					400: "#cbd5e0",
					500: "#a0aec0",
					600: "#718096",
					700: "#4a5568",
					800: "#2d3748",
					900: "#1a202c",
				},
			},
			fontFamily: {
				mono: ["Alkatra", "monospace"],
			},
		},
	},
	variants: {
		extend: {},
	},
};