FMI-FE/tailwind.config.ts at develop · find-my-item/FMI-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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
import type { Config } from "tailwindcss";
const typedConfig: Config = require("./src/utils/tokens/tailwind.config");
import {
  flexCenter,
  flexColCenter,
  mouseHover,
  uEllipsis,
  noScrollbar,
  hBase,
  fixedButtonPosition,
  fixedButtonPositionBottom,
  footerAlertDot,
} from "./src/utils/customStylePlugins/customStylePlugins";
import customFonts from "./src/utils/customFonts/customFonts";
import plugin from "tailwindcss/plugin";

const flatten = (obj: Record<string, any>, path: string[] = []): [string, string][] =>
  Object.entries(obj).flatMap(([k, v]) =>
    v && typeof v === "object"
      ? flatten(v, path.concat(k))
      : [[path.concat(k).join("-"), v as string]]
  );

const fillBgUtilities = plugin(({ addUtilities, theme }) => {
  const tokens = (theme("fill") || {}) as Record<string, any>;
  const utils = Object.fromEntries(
    flatten(tokens).map(([k, v]) => [`.bg-fill-${k}`, { backgroundColor: v }])
  );
  addUtilities(utils);
});

const {
  system,
  dimension,
  lineHeights,
  color,
  border,
  letterSpacing,
  fontWeights,
  fg,
  bg,
  accent,
  boxShadow,
  labelsVibrant,
  ...validExtend
} = typedConfig.theme?.extend ?? {};

const config: Config = {
  mode: "jit",
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
  darkMode: "class",
  theme: {
    screens: {
      mobile: "320px",
      tablet: "768px",
      pc: "1280px",
    },
    extend: {
      fill: (typedConfig.theme?.extend as any)?.fill ?? {},
      ...validExtend,
      colors: { ...color, system, labelsVibrant, border },
      fontFamily: { sans: ["var(--font-pretendard)", "Inter", "sans-serif"] },
      lineHeight: lineHeights,
      fontWeight: fontWeights,
      fontSize: customFonts,
      boxShadow: boxShadow,
      backgroundColor: { ...bg, fg },
      letterSpacing: letterSpacing,
      accentColor: accent,
      textColor: fg,
      width: dimension,
      height: dimension,
      borderColor: { ...border, fg },
    },
  },
  plugins: [
    fillBgUtilities,
    flexCenter,
    flexColCenter,
    mouseHover,
    uEllipsis,
    noScrollbar,
    hBase,
    fixedButtonPosition,
    fixedButtonPositionBottom,
    footerAlertDot,
  ],
  safelist: [
    "flex-center",
    "flex-col-center",
    "mouse-hover",
    "u-ellipsis",
    "no-scrollbar",
    "h-base",
    "fixed-button-position",
    "fixedButtonPositionBottom",
    "footer-alert-dot",
  ],
};

export default config;