Plango/tailwind.config.ts at develop · sejin5/Plango · 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
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/stories/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  darkMode: ["class"],
  theme: {
    extend: {
      colors: {
        gray: {
          100: "var(--gray-100)",
          200: "var(--gray-200)",
          300: "var(--gray-300)",
          400: "var(--gray-400)",
          500: "var(--gray-500)",
          600: "var(--gray-600)",
          700: "var(--gray-700)",
          800: "var(--gray-800)",
          900: "var(--gray-900)",
        },
        pink: {
          50: "var(--pink-50)",
          100: "var(--pink-100)",
          200: "var(--pink-200)",
          300: "var(--pink-300)",
          400: "var(--pink-400)",
          500: "var(--pink-500)",
          600: "var(--pink-600)",
          700: "var(--pink-700)",
          800: "var(--pink-800)",
          900: "var(--pink-900)",
        },
        red: {
          400: "var(--red-400)",
          500: "var(--red-500)",
          600: "var(--red-600)",
        },
        rose: {
          400: "var(--rose-400)",
        },
        orange: {
          200: "var(--orange-200)",
          400: "var(--orange-400)",
          800: "var(--orange-800)",
        },
        yellow: {
          400: "var(--yellow-400)",
        },
        green: {
          200: "var(--green-200)",
          400: "var(--green-400)",
          800: "var(--green-800)",
        },
        blue: {
          200: "var(--blue-200)",
          300: "var(--blue-300)",
          400: "var(--blue-400)",
          800: "var(--blue-800)",
        },
        purple: {
          200: "var(--purple-200)",
          400: "var(--purple-400)",
          800: "var(--purple-800)",
        },
        white: "var(--white)",
        black: "var(--black)",
        background: "var(--background)",
        "modal-frame": "var(--modal-frame)",
        "modal-dimmed": "var(--modal-dimmed)",
        "dimmed-overlay": "var(--dimmed-overlay)",
        gradient: "var(--gradient)",
      },
      borderColor: {
        "line-strong": "var(--line-strong)",
      },
      fontSize: {
        caption: ["var(--fs-caption)", { lineHeight: "var(--lh-caption)" }],
        "body-xs": ["var(--fs-body-xs)", { lineHeight: "var(--lh-body-xs)" }],
        "body-s": ["var(--fs-body-s)", { lineHeight: "var(--lh-body-s)" }],
        "body-m": ["var(--fs-body-m)", { lineHeight: "var(--lh-body-m)" }],
        "body-l": ["var(--fs-body-l)", { lineHeight: "var(--lh-body-l)" }],
        modal: ["var(--fs-heading-modal)", { lineHeight: "var(--lh-heading-modal)" }],
        "heading-s": ["var(--fs-heading-s)", { lineHeight: "var(--lh-heading-s)" }],
        "heading-m": ["var(--fs-heading-m)", { lineHeight: "var(--lh-heading-m)" }],
        "heading-l": ["var(--fs-heading-l)", { lineHeight: "var(--lh-heading-l)" }],
        "heading-xl": ["var(--fs-heading-xl)", { lineHeight: "var(--lh-heading-xl)" }],
      },
      fontFamily: {
        sans: ["Pretendard", "ui-sans-serif", "system-ui", "sans-serif"],
      },
      screens: {
        mobile: "375px",
        tablet: "744px",
        desktop: "1200px",
      },
      boxShadow: {
        xl: "0 25px 50px 0 rgba(0,0,0,0.25)",
        floating: "0 5px 5px 0 rgba(0,0,0,0.25)",
      },
    },
  },
  plugins: [],
  variants: {
    extend: {},
  },
};
export default config;