moving-fe/tailwind.config.ts at release · codeit-moving/moving-fe · 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
import type { Config } from "tailwindcss";

export default {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        bg: {
          100: "#FCFCFC",
          200: "#F7F7F7",
          300: "#EFEFEF",
          400: "#F4F7FB",
        },
        black: {
          100: "#6B6B6B",
          200: "#525252",
          300: "#373737",
          400: "#1F1F1F",
          500: "#040404",
        },
        grayscale: {
          50: "#000000",
          100: "#DEDEDE",
          200: "#C4C4C4",
          300: "#ABABAB",
          400: "#999999",
          500: "#808080",
        },
        "pr-blue": {
          50: "#F5FAFF",
          100: "#E9F4FF",
          200: "#4DA9FF",
          300: "#1B92FF",
          400: "#242945",
        },
        "pr-yellow": {
          100: "#FFC149",
        },
        "pr-red": {
          100: "#FFEEF0",
          200: "#FF4F64",
        },
        line: {
          100: "#F2F2F2",
          200: "#E6E6E6",
        },
      },
      fontFamily: {
        pretendard: ["Pretendard", "sans-serif"],
      },
      fontSize: {
        "3xl": ["32px", { lineHeight: "42px" }],
        "2xl": ["24px", { lineHeight: "32px" }],
        xl: ["20px", { lineHeight: "32px" }],
        "2lg": ["18px", { lineHeight: "26px" }],
        lg: ["16px", { lineHeight: "26px" }],
        md: ["14px", { lineHeight: "24px" }],
        sm: ["13px", { lineHeight: "22px" }],
        xs: ["12px", { lineHeight: "18px" }],
      },
      fontWeight: {
        bold: "700",
        semibold: "600",
        medium: "500",
        regular: "400",
      },
      screens: {
        mobile: "375px",
        tablet: "744px",
        pc: "1400px",
      },
      boxShadow: {
        card: "2px 2px 10px 0px rgba(220, 220, 220, 0.14), -2px -2px 10px 0px rgba(220, 220, 220, 0.14)",
        border: "4px 4px 16px 0px rgba(233, 233, 233, 0.1)",
        bar: "0px 2px 10px 0px rgba(248, 248, 248, 0.1)",
      },
    },
  },
  plugins: [require("tailwind-scrollbar")({ nocompatible: true })],
} satisfies Config;