project_onYourWay/tailwind.config.js at develop · ohgoodgood/project_onYourWay · 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
/** @type {import('tailwindcss').Config} */
import scrollbarHide from "tailwind-scrollbar-hide";

export default {
  content: ["./src/**/*.{js,jsx,html}"],
  theme: {
    extend: {
      boxShadow: {
        // 레이아웃 짤 때 경계선 보기 위해 사용. shadow-inset 으로 사용
        inset: "inset 0 0 10px",

        // 카드 그림자
        "card-shadow": "0px 1px 2px 0px rgba(0, 0, 0, 0.30)",

        // 탭 내부 그림자
        "tab-inner-shadow": "0px 1px 2px 0px rgba(0, 0, 0, 0.10) inset",
      },

      fontFamily: {
        laundry: ["TTLaundryGothicR", "sans-serif"], // font-laundry 로 사용
        pretendard: ["Pretendard-Regular", "sans-serif"], // font-pretendard 로 사용
      },

      fontSize: {
        // text-card-title 과 같이 사용

        "card-title": [
          "20px",
          { lineHeight: "auto", letterSpacing: "-0.06em", fontWeight: "400" },
        ],
        "card-price": [
          "16px",
          { lineHeight: "auto", letterSpacing: "-0.06em", fontWeight: "700" },
        ],
        "card-timelimit": [
          "16px",
          { lineHeight: "auto", letterSpacing: "-0.06em", fontWeight: "500" },
        ],
        "detail-title": [
          "24px",
          { lineHeight: "auto", letterSpacing: "-0.06em", fontWeight: "400" },
        ],
        "input-title": [
          "20px",
          { lineHeight: "auto", letterSpacing: "-0.06em", fontWeight: "400" },
        ],
        "input-defaultValue": [
          "18px",
          { lineHeight: "auto", letterSpacing: "-0.06em", fontWeight: "700" },
        ],
        "button-text": [
          "18px",
          { lineHeight: "auto", letterSpacing: "-0.06em", fontWeight: "600" },
        ],
        "toggle-text": [
          "16px",
          { lineHeight: "auto", letterSpacing: "-0.06em", fontWeight: "400" },
        ],
        "header-page-title": [
          "24px",
          { lineHeight: "auto", letterSpacing: "-0.08em", fontWeight: "400" },
        ],
        "detail-price": [
          "18px",
          { lineHeight: "auto", letterSpacing: "-0.06em", fontWeight: "800" },
        ],
        "regular-text": [
          "18px",
          { lineHeight: "auto", letterSpacing: "-0.06em", fontWeight: "500" },
        ],
        "small-text": [
          "16px",
          { lineHeight: "auto", letterSpacing: "-0.06em", fontWeight: "500" },
        ],
        "detail-tag": [
          "14px",
          { lineHeight: "auto", letterSpacing: "-0.06em", fontWeight: "700" },
        ],
        "navigation-text": [
          "12px",
          { lineHeight: "auto", letterSpacing: "-0.06em", fontWeight: "400" },
        ],
        "navigation-top": [
          "28px",
          { lineHeight: "auto", letterSpacing: "-0.08em", fontWeight: "700" },
        ],
        "tab": [
          "16px",
          { lineHeight: "auto", letterSpacing: "-0.06em", fontWeight: "700" },
        ],
        "small-button": [
          "14px",
          { lineHeight: "auto", letterSpacing: "-0.06em", fontWeight: "700" }
        ],
        "popup-title": [
          "24px",
          { lineheight: "auto", letterSpacing: "-0.06em", fontWeight: "900" },
        ],
        "popup-text": [
          "20px",
          { lineheight: "145%", letterSpacing: "-0.06em", fontWeight: "500" },
        ]
      },

      colors: {
        // bg-background-color 로 사용
        "background-color": "#F5F9FF",

        // 사용 예시
        // 배경색으로 사용: bg-primary-50
        // 텍스트 색상으로 사용: text-triadic-red-300
        // 테두리 색상으로 사용: border border-purple-500
        // 호버 상태로 사용: hover:bg-gray-200

        primary: {
          50: "#EAEAFD",
          100: "#CACAF9",
          200: "#A6A7F6",
          300: "#8084F2",
          400: "#6366EE",
          500: "#4849E8",
          600: "#433FDC",
          700: "#3A33D0",
          800: "#3226C4",
          900: "#2300B3",
        },
        complementary: {
          50: "#FBFCE5",
          100: "#F6F7C0",
          200: "#F1F195",
          300: "#EBEC6A",
          400: "#E8E848",
          500: "#E4E31E",
          600: "#E5D114",
          700: "#E5BA00",
          800: "#E5A200",
          900: "#E37900",
        },
        "triadic-red": {
          50: "#FEEAED",
          100: "#FEEAED",
          200: "#EB9495",
          300: "#DF6B6C",
          400: "#E84848",
          500: "#E84848",
          600: "#DD292C",
          700: "#CB1E26",
          800: "#BE151F",
          900: "#AF0113",
        },
        gray: {
          50: "#F9F9F9",
          100: "#F4F4F4",
          200: "#ECECEC",
          300: "#DDDDDD",
          400: "#B9B9B9",
          500: "#9A9A9A",
          600: "#717171",
          700: "#5D5D5D",
          800: "#3F3F3F",
          "black-900": "#1E1E1E",
        },
        purple: {
          50: "#E8F1FF",
          100: "#CADAFF",
          200: "#ABC4FF",
          300: "#92ADFB",
          400: "#869BF7",
          500: "#8289F1",
          600: "#7E7BE1",
          700: "#7668CB",
          800: "#6F57B7",
          900: "#633594",
        },
        mint: "#3ECFDD",
        kakao: "#FDE500",
      },
    },
  },
  plugins: [scrollbarHide],
};