magicui

1
const colors = require("tailwindcss/colors");
2

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

5
module.exports = {
6
  darkMode: ["class"],
7
  content: [
8
    "./components/**/*.{ts,tsx}",
9
    "./app/**/*.{ts,tsx}",
10
    "./content/**/*.mdx",
11
    "./registry/**/*.{ts,tsx}",
12
  ],
13
  theme: {
14
    container: {
15
      center: true,
16
      padding: "2rem",
17
      screens: {
18
        "2xl": "1600px",
19
      },
20
    },
21
    extend: {
22
      colors: {
23
        border: "hsl(var(--border))",
24
        input: "hsl(var(--input))",
25
        ring: "hsl(var(--ring))",
26
        background: "hsl(var(--background))",
27
        foreground: "hsl(var(--foreground))",
28
        primary: {
29
          DEFAULT: "hsl(var(--primary))",
30
          foreground: "hsl(var(--primary-foreground))",
31
        },
32
        secondary: {
33
          DEFAULT: "hsl(var(--secondary))",
34
          foreground: "hsl(var(--secondary-foreground))",
35
        },
36
        destructive: {
37
          DEFAULT: "hsl(var(--destructive))",
38
          foreground: "hsl(var(--destructive-foreground))",
39
        },
40
        muted: {
41
          DEFAULT: "hsl(var(--muted))",
42
          foreground: "hsl(var(--muted-foreground))",
43
        },
44
        accent: {
45
          DEFAULT: "hsl(var(--accent))",
46
          foreground: "hsl(var(--accent-foreground))",
47
        },
48
        popover: {
49
          DEFAULT: "hsl(var(--popover))",
50
          foreground: "hsl(var(--popover-foreground))",
51
        },
52
        card: {
53
          DEFAULT: "hsl(var(--card))",
54
          foreground: "hsl(var(--card-foreground))",
55
        },
56
      },
57
      borderRadius: {
58
        lg: `var(--radius)`,
59
        md: `calc(var(--radius) - 2px)`,
60
        sm: "calc(var(--radius) - 4px)",
61
      },
62
      animation: {
63
        "accordion-down": "accordion-down 0.2s ease-out",
64
        "accordion-up": "accordion-up 0.2s ease-out",
65
        gradient: "gradient 8s linear infinite",
66
        meteor: "meteor 5s linear infinite",
67
        grid: "grid 15s linear infinite",
68
        marquee: "marquee var(--duration) infinite linear",
69
        "marquee-vertical": "marquee-vertical var(--duration) linear infinite",
70
        flip: "flip calc(var(--spark) * 2) infinite steps(2, end)",
71
        rotate: "rotate var(--spark) linear infinite both",
72
        "spin-around": "spin-around calc(var(--speed) * 2) infinite linear",
73
        slide: "slide var(--speed) ease-in-out infinite alternate",
74
        ripple: "ripple 3400ms ease infinite",
75
        line: "line 2s linear infinite",
76
        shimmer: "shimmer 8s infinite",
77
        "border-beam": "border-beam calc(var(--duration)*1s) infinite linear",
78
        orbit: "orbit calc(var(--duration)*1s) linear infinite",
79
        backgroundPositionSpin:
80
          "background-position-spin 3000ms infinite alternate",
81
      },
82
      keyframes: {
83
        "accordion-down": {
84
          from: { height: "0" },
85
          to: { height: "var(--radix-accordion-content-height)" },
86
        },
87
        "accordion-up": {
88
          from: { height: "var(--radix-accordion-content-height)" },
89
          to: { height: "0" },
90
        },
91
        "background-position-spin": {
92
          "0%": { backgroundPosition: "top center" },
93
          "100%": { backgroundPosition: "bottom center" },
94
        },
95
        gradient: {
96
          to: {
97
            backgroundPosition: "var(--bg-size) 0",
98
          },
99
        },
100
        meteor: {
101
          "0%": { transform: "rotate(215deg) translateX(0)", opacity: "1" },
102
          "70%": { opacity: "1" },
103
          "100%": {
104
            transform: "rotate(215deg) translateX(-500px)",
105
            opacity: "0",
106
          },
107
        },
108
        grid: {
109
          "0%": { transform: "translateY(-50%)" },
110
          "100%": { transform: "translateY(0)" },
111
        },
112
        marquee: {
113
          from: { transform: "translateX(0)" },
114
          to: { transform: "translateX(calc(-100% - var(--gap)))" },
115
        },
116
        "marquee-vertical": {
117
          from: { transform: "translateY(0)" },
118
          to: { transform: "translateY(calc(-100% - var(--gap)))" },
119
        },
120
        flip: {
121
          to: { rotate: "360deg" },
122
        },
123
        rotate: {
124
          to: {
125
            transform: "rotate(90deg)",
126
          },
127
        },
128
        "spin-around": {
129
          "0%": {
130
            transform: "translateZ(0) rotate(0)",
131
          },
132
          "15%, 35%": {
133
            transform: "translateZ(0) rotate(90deg)",
134
          },
135
          "65%, 85%": {
136
            transform: "translateZ(0) rotate(270deg)",
137
          },
138
          "100%": {
139
            transform: "translateZ(0) rotate(360deg)",
140
          },
141
        },
142
        ripple: {
143
          "0%, 100%": {
144
            transform: "translate(-50%, -50%) scale(1)",
145
          },
146
          "50%": {
147
            transform: "translate(-50%, -50%) scale(0.9)",
148
          },
149
        },
150
        slide: {
151
          to: {
152
            transform: "translate(calc(100cqw - 100%), 0)",
153
          },
154
        },
155
        line: {
156
          "0%": { "mask-position-x": "0%" },
157
          "100%": { "mask-position-x": "100%" },
158
        },
159
        "border-beam": {
160
          "100%": {
161
            "offset-distance": "100%",
162
          },
163
        },
164
        shimmer: {
165
          "0%, 90%, 100%": {
166
            "background-position": "calc(-100% - var(--shimmer-width)) 0",
167
          },
168
          "30%, 60%": {
169
            "background-position": "calc(100% + var(--shimmer-width)) 0",
170
          },
171
        },
172
        orbit: {
173
          "0%": {
174
            transform:
175
              "rotate(0deg) translateY(calc(var(--radius) * 1px)) rotate(0deg)",
176
          },
177
          "100%": {
178
            transform:
179
              "rotate(360deg) translateY(calc(var(--radius) * 1px)) rotate(-360deg)",
180
          },
181
        },
182
      },
183
    },
184
  },
185
  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
186
};
187