AnemonLabs.Main/tailwind.config.ts at master · AnemonOFF/AnemonLabs.Main · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import type { Config } from "tailwindcss";
import { heroui } from "@heroui/react";
import twTypography from "@tailwindcss/typography";

const config: Config = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      keyframes: ({ colors }) => ({
        gradient: {
          to: { "background-position": "200% center" },
        },
        moveTop: {
          "0%": { transform: "translate(0, 0)" },
          "25%": { transform: "translate(-100%, 80vh)" },
          "50%": { transform: "translate(70vw, 60vh)" },
          "75%": { transform: "translate(50vw, 100px)" },
          "100%": { transform: "translate(0, 0)" },
        },
        moveBottom: {
          "0%": { transform: "translate(0, 0)" },
          "25%": { transform: "translate(100px, -40vh)" },
          "50%": { transform: "translate(-70vw, -60vh)" },
          "75%": { transform: "translate(-80vw, -100%)" },
          "100%": { transform: "translate(0, 0)" },
        },
        coloring: {
          "0%": { backgroundColor: colors.emerald[400] },
          "50%": { backgroundColor: colors.sky[400] },
          "100%": { backgroundColor: colors.purple[400] },
        },
      }),
      backgroundSize: {
        "300%": "300%",
      },
      animation: {
        gradient: "gradient 6s ease-in infinite",
        "move-top": "moveTop 60s ease-in-out infinite",
        "move-bottom": "moveBottom 60s ease-in-out infinite",
        coloring: "coloring 10s linear infinite",
      },
    },
  },
  darkMode: "class",
  plugins: [heroui(), twTypography],
};
export default config;