find-it/tailwind.config.js at develop · bellori729/find-it · 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
import range from 'lodash/range';
const pxToRem = (px, base = 16) => `${px / base}rem`;

const pxToRemFunc = (start, end) => {
  return range(start, end).reduce((acc, px) => {
    acc[`${px}px`] = pxToRem(px);
    return acc;
  }, {});
};

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      spacing: {
        ...pxToRemFunc(1, 1000),
      },
      inset: {
        ...pxToRemFunc(1, 1000),
      },
      fontSize: {
        ...pxToRemFunc(1, 1000),
      },
      lineHeight: {
        ...pxToRemFunc(1, 1000),
      },
      borderRadius: {
        ...pxToRemFunc(1, 1000),
      },
      screens: {
        mobile: '375px',
        tablet: '768px',
        desktop: '1280px',
      },
      colors: {
        primary: '#4785ff',
        secondary: '#ff6b57',
        black40: '#00000045',
        'skyblue-100': '#f1f8ff',
        'skyblue-300': '#e1efff',
        'skyblue-400': '#aecfff',
        'gray-100': '#f5f5f5',
        'gray-200': '#f1f1f1',
        'gray-300': '#e4e4e4',
        'gray-350': '#bcbcbc',
        'gray-400': '#989898',
        'gray-450': '#757575',
        'gray-500': '#666666',
        'gray-700': '#494949',
      },
      fontFamily: {
        sans: ['OAGothic', 'noto-sans-kr', 'sans-serif'],
      },
    },
    plugins: [],
  },
};