2025_fall_festival_front/tailwind.config.js at dev · LikeLion-at-DGU/2025_fall_festival_front · 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
/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["SUITE Variable", "SUITE", "Pretendard", "sans-serif"], // Tailwind 기본 sans 폰트 덮어쓰기
        suite: ["SUITE Variable", "SUITE", "Pretendard", "sans-serif"],
        pretendard: ["Pretendard", "sans-serif"],
      },
      colors: {
        orange: "#e65b4d",
        gray: "#F4F4F5",
        black: "#2A2A2E",
        white: "#FFFFFF",
        lightgray: "#E4E4E7",
        primary: {
          50: "#fef2f1",
          100: "#fee4e2",
          200: "#fecdd3",
          300: "#fda4af",
          400: "#EF7063", // Primary-400
          500: "#e65b4d", // Primary-500
          600: "#dc2626",
          700: "#b91c1c",
          800: "#991b1b",
          900: "#7f1d1d",
        },
        neutral: {
          0: "#FFF",
          100: "#F4F4F5",
          200: "#E4E4E7",
          300: "#D4D4D8",
          400: "#A1A1AA",
          500: "#71717A",
          600: "#52525B",
          700: "#3F3F46",
          800: "#27272A",
          900: "#18181B",
        },
      },
      borderRadius: {
        l: "12px", // Radius-L
        m: "8px", // Radius-M
        s: "4px", // Radius-S
        xl: "20px",
      },
      boxShadow: {
        tag: "0 1px 4px 0 rgba(0, 0, 0, 0.15)", // Shadow/Tag
        card: "0 3px 5px 0 rgba(0,0,0,0.1)",
      },
      backgroundImage: {
        "developers-card":
          "linear-gradient(147deg, rgba(251, 209, 205, 0.60) 0%, rgba(239, 112, 99, 0.60) 100%)", // 카드 그라디언트
      },
      animation: {
        marquee: "marquee 7s linear infinite",
      },
      keyframes: {
        marquee: {
          "0%": { transform: "translateX(100%)" },
          "100%": { transform: "translateX(-100%)" },
        },
      },
      spacing: {
        'safe': 'env(safe-area-inset-top)',
        'safe-bottom': 'env(safe-area-inset-bottom)',
        'safe-left': 'env(safe-area-inset-left)',
        'safe-right': 'env(safe-area-inset-right)',
      },
    },
  },
  plugins: [
    function({ addUtilities }) {
      const newUtilities = {
        '.pt-safe': {
          paddingTop: 'env(safe-area-inset-top)',
        },
        '.pb-safe': {
          paddingBottom: 'env(safe-area-inset-bottom)',
        },
        '.pl-safe': {
          paddingLeft: 'env(safe-area-inset-left)',
        },
        '.pr-safe': {
          paddingRight: 'env(safe-area-inset-right)',
        },
        '.mt-safe': {
          marginTop: 'env(safe-area-inset-top)',
        },
        '.mb-safe': {
          marginBottom: 'env(safe-area-inset-bottom)',
        },
        '.ml-safe': {
          marginLeft: 'env(safe-area-inset-left)',
        },
        '.mr-safe': {
          marginRight: 'env(safe-area-inset-right)',
        },
        '.py-safe': {
          paddingTop: 'env(safe-area-inset-top)',
          paddingBottom: 'env(safe-area-inset-bottom)',
        },
        '.px-safe': {
          paddingLeft: 'env(safe-area-inset-left)',
          paddingRight: 'env(safe-area-inset-right)',
        },
      }
      addUtilities(newUtilities)
    }
  ],
};