less3-website/tailwind.config.js at main · Less3Design/less3-website · 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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        "less3-pink": "#FF8DFD",
        "less3-gray": "#2D2D2D",
      },
      animation: {
        containerEnter: "enter 1.35s cubic-bezier(0.87, 0, 0.13, 1)",
        blurFade: "blurFade 1.5s cubic-bezier(0.87, 0, 0.13, 1)",
        containerWhite: "enterWhite .6s ease-out",
        containerBlack: "enterBlack .65s cubic-bezier(0.87, 0, 0.13, 1)",
        heartEnter: "heartEnter 0.8s cubic-bezier(0.87, 0, 0.13, 1)",
        whiteFlash: "whiteFlash 0.4s .4s ease-in",
        hideAfter: "hideAfter 0.6s linear",
        toastIn: "toastIn 0.3s ease-out forwards",
        toastOut: "toastOut 0.3s ease-in forwards",
      },
      keyframes: {
        enterWhite: {
          "0%": { opacity: "0" },
          "100%": { opacity: "100" },
        },
        whiteFlash: {
          "0%": { opacity: "0" },
          "50%": { opacity: "100" },
          "100%": { opacity: "0" },
        },
        enterBlack: {
          "0%": { opacity: "100" },
          "80%": { opacity: "100" },
          "100%": { opacity: "0" },
        },
        enter: {
          "0%": { transform: "scale(0.8,0.8)" },
          "100%": { transform: "scale(1,1)" },
        },
        heartEnter: {
          "0%": { opacity: "100", transform: "scale(1,1) translate(-50%,-50%)" },
          "100%": { opacity: "0", transform: "scale(0.5,0.5) translate(-50%,-50%)" },
        },
        blurFade: {
          "0%": { backdropFilter: "blur(32px)" },
          "100%": { backdropFilter: "blur(0px)" },
        },
        hideAfter: {
          "0%": { opacity: "100" },
          "100%": { opacity: "100" },
        },
        toastIn: {
          "0%": { opacity: "0", transform: "translateY(-8px)" },
          "100%": { opacity: "1", transform: "translateY(0)" },
        },
        toastOut: {
          "0%": { opacity: "1", transform: "translateY(0)" },
          "100%": { opacity: "0", transform: "translateY(8px)" },
        },
      },
    },
  },
  plugins: [],
};