1  import type { Config } from "tailwindcss"
  2  
  3  const config = {
  4    darkMode: ["class"],
  5    content: [
  6      './pages/**/*.{ts,tsx}',
  7      './components/**/*.{ts,tsx}',
  8      './app/**/*.{ts,tsx}',
  9      './src/**/*.{ts,tsx}',
 10  	],
 11    prefix: "",
 12    theme: {
 13      container: {
 14        center: true,
 15        padding: "2rem",
 16        screens: {
 17          "2xl": "1400px",
 18        },
 19      },
 20      extend: {
 21        colors: {
 22          border: "hsl(var(--border))",
 23          input: "hsl(var(--input))",
 24          ring: "hsl(var(--ring))",
 25          background: "hsl(var(--background))",
 26          foreground: "hsl(var(--foreground))",
 27          primary: {
 28            DEFAULT: "hsl(var(--primary))",
 29            foreground: "hsl(var(--primary-foreground))",
 30          },
 31          secondary: {
 32            DEFAULT: "hsl(var(--secondary))",
 33            foreground: "hsl(var(--secondary-foreground))",
 34          },
 35          destructive: {
 36            DEFAULT: "hsl(var(--destructive))",
 37            foreground: "hsl(var(--destructive-foreground))",
 38          },
 39          muted: {
 40            DEFAULT: "hsl(var(--muted))",
 41            foreground: "hsl(var(--muted-foreground))",
 42          },
 43          accent: {
 44            DEFAULT: "hsl(var(--accent))",
 45            foreground: "hsl(var(--accent-foreground))",
 46          },
 47          popover: {
 48            DEFAULT: "hsl(var(--popover))",
 49            foreground: "hsl(var(--popover-foreground))",
 50          },
 51          card: {
 52            DEFAULT: "hsl(var(--card))",
 53            foreground: "hsl(var(--card-foreground))",
 54          },
 55        },
 56        borderRadius: {
 57          lg: "var(--radius)",
 58          md: "calc(var(--radius) - 2px)",
 59          sm: "calc(var(--radius) - 4px)",
 60        },
 61        keyframes: {
 62          "accordion-down": {
 63            from: { height: "0" },
 64            to: { height: "var(--radix-accordion-content-height)" },
 65          },
 66          "accordion-up": {
 67            from: { height: "var(--radix-accordion-content-height)" },
 68            to: { height: "0" },
 69          },
 70          marquee: {
 71            from: { transform: "translateX(0)" },
 72            to: { transform: "translateX(calc(-100% - var(--gap)))" },
 73          },
 74          "marquee-vertical": {
 75            from: { transform: "translateY(0)" },
 76            to: { transform: "translateY(calc(-100% - var(--gap)))" },
 77          },
 78          "spin-around": {
 79            "0%": {
 80              transform: "translateZ(0) rotate(0)",
 81            },
 82            "15%, 35%": {
 83              transform: "translateZ(0) rotate(90deg)",
 84            },
 85            "65%, 85%": {
 86              transform: "translateZ(0) rotate(270deg)",
 87            },
 88            "100%": {
 89              transform: "translateZ(0) rotate(360deg)",
 90            },
 91          },
 92          slide: {
 93            to: {
 94              transform: "translate(calc(100cqw - 100%), 0)",
 95            },
 96          },
 97        },
 98        animation: {
 99          "accordion-down": "accordion-down 0.2s ease-out",
100          "accordion-up": "accordion-up 0.2s ease-out",
101          "spin-around": "spin-around calc(var(--speed) * 2) infinite linear",
102          slide: "slide var(--speed) ease-in-out infinite alternate",
103          marquee: "marquee var(--duration) linear infinite",
104          "marquee-vertical": "marquee-vertical var(--duration) linear infinite",
105        },
106      },
107    },
108    plugins: [require("tailwindcss-animate")],
109  } satisfies Config
110  
111  export default config