inflearn-vibe-coding/tailwind.config.ts at main · code-bootcamp/inflearn-vibe-coding · 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
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/commons/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        // 기본 배경/전경 색상
        background: "var(--background)",
        foreground: "var(--foreground)",

        // Blue 계열
        blue: {
          5: "var(--color-blue-5)",
          10: "var(--color-blue-10)",
          20: "var(--color-blue-20)",
          30: "var(--color-blue-30)",
          40: "var(--color-blue-40)",
          50: "var(--color-blue-50)",
          60: "var(--color-blue-60)",
          70: "var(--color-blue-70)",
          80: "var(--color-blue-80)",
          90: "var(--color-blue-90)",
        },

        // Gray 계열
        gray: {
          white: "var(--color-gray-white)",
          5: "var(--color-gray-5)",
          10: "var(--color-gray-10)",
          20: "var(--color-gray-20)",
          30: "var(--color-gray-30)",
          40: "var(--color-gray-40)",
          50: "var(--color-gray-50)",
          60: "var(--color-gray-60)",
          70: "var(--color-gray-70)",
          80: "var(--color-gray-80)",
          90: "var(--color-gray-90)",
          black: "var(--color-gray-black)",
        },

        // Red 계열
        red: {
          5: "var(--color-red-5)",
          10: "var(--color-red-10)",
          20: "var(--color-red-20)",
          30: "var(--color-red-30)",
          40: "var(--color-red-40)",
          50: "var(--color-red-50)",
          60: "var(--color-red-60)",
        },

        // Green 계열
        green: {
          5: "var(--color-green-5)",
          10: "var(--color-green-10)",
          20: "var(--color-green-20)",
          30: "var(--color-green-30)",
          40: "var(--color-green-40)",
          50: "var(--color-green-50)",
          60: "var(--color-green-60)",
        },

        // Yellow 계열
        yellow: {
          5: "var(--color-yellow-5)",
          10: "var(--color-yellow-10)",
          20: "var(--color-yellow-20)",
          30: "var(--color-yellow-30)",
          40: "var(--color-yellow-40)",
          50: "var(--color-yellow-50)",
          60: "var(--color-yellow-60)",
        },

        // Cool Gray 계열
        "cool-gray": {
          1: "var(--color-cool-gray-1)",
          5: "var(--color-cool-gray-5)",
          10: "var(--color-cool-gray-10)",
          20: "var(--color-cool-gray-20)",
          30: "var(--color-cool-gray-30)",
          40: "var(--color-cool-gray-40)",
          50: "var(--color-cool-gray-50)",
          60: "var(--color-cool-gray-60)",
        },

        // 시맨틱 컬러
        primary: {
          DEFAULT: "var(--color-primary)",
          dark: "var(--color-primary-dark)",
        },
        success: {
          DEFAULT: "var(--color-success)",
          light: "var(--color-success-light)",
        },
        error: {
          DEFAULT: "var(--color-error)",
          light: "var(--color-error-light)",
        },
        warning: {
          DEFAULT: "var(--color-warning)",
          light: "var(--color-warning-light)",
        },

        // 배경 컬러
        bg: {
          light: "var(--color-background-light)",
          dark: "var(--color-background-dark)",
          subtle: "var(--color-background-subtle)",
        },

        // 텍스트 컬러
        text: {
          primary: "var(--color-text-primary)",
          secondary: "var(--color-text-secondary)",
          tertiary: "var(--color-text-tertiary)",
          inverse: "var(--color-text-inverse)",
        },

        // 경계선 컬러
        border: {
          DEFAULT: "var(--color-border-default)",
          subtle: "var(--color-border-subtle)",
          strong: "var(--color-border-strong)",
        },
      },

      // 그라디언트 배경
      backgroundImage: {
        'gradient-primary': 'var(--gradient-primary)',
        'gradient-skeleton': 'var(--gradient-skeleton)',
      },
    },
  },
  plugins: [],
};
export default config;