Taskify/tailwind.config.ts at main · Codeit-Part3-Team3/Taskify · 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
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}',
  ],
  variants: {
    extend: {
      backgroundColor: ['checked'],
      borderColor: ['checked'],
    },
  },
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
        largeLogo: "url('/logo/nav_logo_large.svg')",
        smallLogo: "url('/logo/nav_logo_small.svg')",
        checkbox: "url('/images/custom-check-icon)",
      },
      colors: {
        black: '#171717',
        black90: '#202020',
        black80: '#333236',
        black60: '#4B4B4B',
        gray35: '#9B9B9B',
        gray50: '#787486',
        gray40: '#9FA6B2',
        gray30: '#D9D9D9',
        gray20: '#EEEEEE',
        gray10: '#FAFAFA',
        white8: 'rgba(255,255,255,0.81)',
        white: '#FFFFFF',
        violet: '#5534DA',
        violet8: '#F1EFFD',
        red: '#D6173A',
        green: '#7AC555',
        green10: '#E7F7DB',
        green20: '#86D549',
        purple: '#760DDE',
        orange: '#FFA500',
        orange10: '#F9EEE3',
        orange20: '#D58D49',
        blue: '#76A5EA',
        blue10: '#DBE6F7',
        blue20: '#4981D5',
        pink: '#E876EA',
        pink10: '#F7DBF0',
        pink20: '#D549B6',
      },
      fontFamily: {
        pre: 'Pretendard',
        mon: 'Montserrat',
        mp: ['Montserrat', 'Pretendard'],
      },
      screens: {
        sm: '376px',
        md: '745px',
        lg: '1440px',
      },
      transitionProperty: {
        height: 'height',
      },
      animation: {
        skeleton: 'skeleton 2s infinite linear',
      },
      keyframes: {
        skeleton: {
          '0%': { backgroundColor: '#f3f3f3' },
          '50%': { backgroundColor: '#9e9e9e' },
          '100%': { backgroundColor: '#f3f3f3' },
        },
      },
    },
  },
};

export default config;