simple-thumbnail/tailwind.config.js at main · yangjaecheon-otter-guardians/simple-thumbnail · 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
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        'primary-10': '#EDFFF2',
        'primary-20': '#DCFFE6',
        'primary-30': '#C0FFD2',
        'primary-40': '#D1FFA0',
        'primary-70': '#7BFFA0',
        'primary-100': '#0E0E0E',
        'primary-110': '#45F076',
        'primary-120': '#34E466',
        'primary-130': '#19D24D',
        'primary-160': '#16BD45',
        'grey-100': '#0A0A0A',
        'grey-80': '#484848',
        'grey-60': '#7D7D7D',
        'grey-40': '#A0A0A0',
        'grey-20': '#D0D0D0',
        'grey-10': '#CECECE',
        'grey-00': '#FBFBFB',
      },
      textColor: {
        active: '#0D0D0D',
        darken: '#303030',
        default: '#565656',
        muted: '#929292',
        disabled: '#C5C5C5',
        lighten: '#FBFBFB',
      },
      backgroundColor: {
        surface: '#FFFFFF',
        'on-surface': '#F0F0F0',
        divider: '#EDEDED',
        input: '#FAFAFA',
        'input-border-default': '#E2E2E2',
        'input-border-focus': '#1B1B1C',
        backRed: '#FF3737',
        toYellow: '#FFDF37',
        backOrange: '#FF9549',
        toVioloet: '#AF7EFF',
        backYellow: '#FFE03C',
        toGreen: '#3CFFA1',
        backGreen: '#4FCF00',
        toOrange: '#FF855F',
        backBlue: '#30CDFF',
        toLightOrange: '#FFAD72',
        backPurple: '#A873FF',
        fromPurple: '#D4B9FF',
        toPurple: '#8C45FF',
        backWhite: '#FFFFFF',
        toPink: '#FFB6B6',
      },
      accentColor: {
        'always-red': '#FF3040',
      },
      fontSize: {
        lg: '1.3125rem',
        md1: '1.125rem',
        md2: '1rem',
        sm: '0.875rem',
        xsm: '0.75rem',
      },
      borderWidth: {
        1: '1px',
      },
      fontFamily: {
        suit: 'suit',
        agro: 'agro',
        samlip: 'samlip',
      },
      animation: {
        spinner: 'spin 1000ms infinite linear reverse',
      },
      keyframes: {
        spin: { '100%': { transform: 'rotate(360deg)' } },
      },
      backgroundImage: {
        spinImg: "url('./assets/loading_reverse.png')",
      },
    },
    screens: {
      desktop: '1024px',
      tablet: '768px',
    },
  },
  plugins: [],
};