/ tailwind.config.js
tailwind.config.js
 1  /** @type {import('tailwindcss').Config} */
 2  module.exports = {
 3    darkMode: ["class"],
 4    content: [
 5      "./pages/**/*.{js,jsx}",
 6      "./components/**/*.{js,jsx}",
 7      "./app/**/*.{js,jsx}",
 8      "./src/**/*.{js,jsx}",
 9    ],
10    theme: {
11      container: {
12        center: true,
13        padding: "2rem",
14        screens: {
15          "2xl": "1400px",
16        },
17      },
18      extend: {
19        colors: {
20          border: "hsl(var(--border))",
21          input: "hsl(var(--input))",
22          ring: "hsl(var(--ring))",
23          background: "hsl(var(--background))",
24          foreground: "hsl(var(--foreground))",
25          primary: {
26            DEFAULT: "hsl(var(--primary))",
27            foreground: "hsl(var(--primary-foreground))",
28          },
29          secondary: {
30            DEFAULT: "hsl(var(--secondary))",
31            foreground: "hsl(var(--secondary-foreground))",
32          },
33          destructive: {
34            DEFAULT: "hsl(var(--destructive))",
35            foreground: "hsl(var(--destructive-foreground))",
36          },
37          muted: {
38            DEFAULT: "hsl(var(--muted))",
39            foreground: "hsl(var(--muted-foreground))",
40          },
41          accent: {
42            DEFAULT: "hsl(var(--accent))",
43            foreground: "hsl(var(--accent-foreground))",
44          },
45          popover: {
46            DEFAULT: "hsl(var(--popover))",
47            foreground: "hsl(var(--popover-foreground))",
48          },
49          card: {
50            DEFAULT: "hsl(var(--card))",
51            foreground: "hsl(var(--card-foreground))",
52          },
53        },
54        borderRadius: {
55          lg: "var(--radius)",
56          md: "calc(var(--radius) - 2px)",
57          sm: "calc(var(--radius) - 4px)",
58        },
59        keyframes: {
60          "accordion-down": {
61            from: { height: 0 },
62            to: { height: "var(--radix-accordion-content-height)" },
63          },
64          "accordion-up": {
65            from: { height: "var(--radix-accordion-content-height)" },
66            to: { height: 0 },
67          },
68        },
69        animation: {
70          "accordion-down": "accordion-down 0.2s ease-out",
71          "accordion-up": "accordion-up 0.2s ease-out",
72        },
73      },
74    },
75    plugins: [require("tailwindcss-animate")],
76  };