Livith-Web/tailwind.config.js at develop · mediunn/Livith-Web · 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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
/** @type {import('tailwindcss').Config} */
const withMT = require("@material-tailwind/react/utils/withMT");
const pxToRem = require("tailwindcss-preset-px-to-rem");

module.exports = withMT({
  presets: [pxToRem],
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        mainYellow30: "#FFFF97",
        mainYellow60: "#FFEB56",
        caution100: "#E11936",
        grayScaleBlack100: "#14171B",
        grayScaleBlack90: "#222831",
        grayScaleBlack80: "#2F3745",
        grayScaleBlack50: "#808794",
        grayScaleBlack30: "#DBDCDF",
        grayScaleBlack5: "#F2F4F6",
        grayScaleWhite: "#FFFFFF",
        lyricsTranslation: "#FFBAB4",
        lyricsOriginal: "#CAD0FF",
        labelSociable100: "#FF7373",
      },
      fontFamily: {
        NotoSansKR: ["NotoSansKR", "sans-serif"],
      },
      fontSize: {
        Title: ["26px", { lineHeight: "1.4", letterSpacing: "-0.05em" }],
        "Head1-sm": ["22px", { lineHeight: "1.4", letterSpacing: "-0.05em" }],
        "Head1-md": ["22px", { lineHeight: "1.4", letterSpacing: "-0.05em" }],
        "Head1-re": ["22px", { lineHeight: "1.4", letterSpacing: "-0.05em" }],
        "Body1-sm": ["18px", { lineHeight: "1.4", letterSpacing: "-0.05em" }],
        "Body2-sm": ["16px", { lineHeight: "1.4", letterSpacing: "-0.05em" }],
        "Body2-md": ["16px", { lineHeight: "1.4", letterSpacing: "-0.05em" }],
        "Body2-re": ["16px", { lineHeight: "1.4", letterSpacing: "-0.05em" }],
        "Body3-sm": ["15px", { lineHeight: "1.4", letterSpacing: "-0.05em" }],
        "Body3-md": ["15px", { lineHeight: "1.4", letterSpacing: "-0.05em" }],
        "Body3-re": ["15px", { lineHeight: "1.4", letterSpacing: "-0.05em" }],
        "Body4-sm": ["14px", { lineHeight: "1.4", letterSpacing: "-0.05em" }],
        "Body4-md": ["14px", { lineHeight: "1.4", letterSpacing: "-0.05em" }],
        "Body4-re": ["14px", { lineHeight: "1.4", letterSpacing: "-0.05em" }],
        "Caption1-Bold": [
          "12px",
          { lineHeight: "1.3", letterSpacing: "-0.05em" },
        ],
        "Caption1-sm": [
          "12px",
          { lineHeight: "1.3", letterSpacing: "-0.05em" },
        ],
        "Caption1-re": [
          "12px",
          { lineHeight: "1.2", letterSpacing: "-0.05em" },
        ],
        "Caption2-sm": [
          "10px",
          { lineHeight: "1.2", letterSpacing: "-0.05em" },
        ],
        "Caption2-re": [
          "10px",
          { lineHeight: "1.2", letterSpacing: "-0.05em" },
        ],
      },
      animation: {
        fadeOut: "fadeOut 1s ease-in-out",
        "scale-in-out": "scaleInOut 2s ease-in-out infinite",
        "toast-in": "toast-in 0.8s ease-out forwards",
        "toast-out": "toast-out 0.7s ease-out forwards",
        shimmer: "shimmer 1.5s infinite",
      },

      keyframes: {
        fadeOut: {
          from: { opacity: 1 },
          to: { opacity: 0 },
        },
        scaleInOut: {
          "0%, 100%": { transform: "scale(1)" },
          "50%": { transform: "scale(1.15)" },
        },
        "toast-in": {
          "0%": { transform: "translateY(-100%)", opacity: "0" },
          "100%": { transform: "translateY(0)", opacity: "1" },
        },
        "toast-out": {
          "0%": { transform: "translateY(0)", opacity: "1" },
          "100%": { transform: "translateY(-100%)", opacity: "0" },
        },
        shimmer: {
          "0%": { backgroundColor: "#2F3745" },
          "50%": { backgroundColor: "#222831" },
          "100%": { backgroundColor: "#2F3745" },
        },
      },
      boxShadow: {
        "custom-toast": "0 0 18px rgba(0, 0, 0, 0.4)",
      },
    },
  },
  plugins: [],
});