tailwind.config.ts

import animate from "tailwindcss-animate";
import type { Config } from "tailwindcss";

/**
 * @type {import("tailwindcss").Config}
 */
export default {
	darkMode: "class",
	content: [ "./app/**/*.{ts,tsx}" ],
	theme: {
		extend: {
			colors: {
				border: "hsl(var(--border))",
				input: "hsl(var(--input))",
				ring: "hsl(var(--ring))",
				background: "hsl(var(--background))",
				foreground: "hsl(var(--foreground))",
				primary: {
					DEFAULT: "hsl(var(--primary))",
					foreground: "hsl(var(--primary-foreground))"
				},
				secondary: {
					DEFAULT: "hsl(var(--secondary))",
					foreground: "hsl(var(--secondary-foreground))"
				},
				destructive: {
					DEFAULT: "hsl(var(--destructive))",
					foreground: "hsl(var(--destructive-foreground))"
				},
				muted: {
					DEFAULT: "hsl(var(--muted))",
					foreground: "hsl(var(--muted-foreground))"
				},
				accent: {
					DEFAULT: "hsl(var(--accent))",
					foreground: "hsl(var(--accent-foreground))"
				},
				popover: {
					DEFAULT: "hsl(var(--popover))",
					foreground: "hsl(var(--popover-foreground))"
				},
				card: {
					DEFAULT: "hsl(var(--card))",
					foreground: "hsl(var(--card-foreground))"
				}
			},
			keyframes: {
				github: {
					"0%, 100%": { transform: "rotate(0)" },
					"20%, 60%": { transform: "rotate(-25deg)" },
					"40%, 80%": { transform: "rotate(10deg)" }
				},
				"caret-blink": {
					"0%, 70%, 100%": { opacity: "1" },
					"20%, 50%": { opacity: "0" }
				}
			},
			animation: {
				github: "github 560ms ease-in-out",
				"caret-blink": "caret-blink 1.25s ease-out infinite"
			}
		}
	},
	plugins: [ animate ]
} satisfies Config;