front/tailwind.config.js at dev · Song307/front · 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
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./public/index.html"
  ],
  theme: {
    extend: {
      colors: {
        primary: '#007bff',
        secondary: '#6c757d',
        success: '#28a745',
        danger: '#dc3545',
        warning: '#ffc107',
        info: '#17a2b8',
        light: '#f8f9fa',
        dark: '#343a40',
      },
      fontFamily: {
        sans: ['Spoqa Han Sans Neo', 'Inter', 'ui-sans-serif', 'system-ui'],
      },
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
      },
            animation: {
              'fade-in-up': 'fadeInUp 0.8s ease-out',
              'pulse-custom': 'pulseCustom 2s infinite',
              'move-right': 'moveRight 150s linear infinite',
              'scroll-up': 'scrollUp 20s linear infinite',
              'wave': 'wave 0.8s ease-in-out infinite',
              'spin': 'spin 1s linear infinite',
            },
            keyframes: {
              fadeInUp: {
                'from': {
                  opacity: '0',
                  transform: 'translateY(30px)',
                },
                'to': {
                  opacity: '1',
                  transform: 'translateY(0)',
                },
              },
              pulseCustom: {
                '0%': {
                  boxShadow: '0 0 0 0 rgba(59, 130, 246, 0.7)',
                },
                '70%': {
                  boxShadow: '0 0 0 10px rgba(59, 130, 246, 0)',
                },
                '100%': {
                  boxShadow: '0 0 0 0 rgba(59, 130, 246, 0)',
                },
              },
              moveRight: {
                '0%': {
                  transform: 'translateX(-100%)',
                },
                '100%': {
                  transform: 'translateX(100%)',
                },
              },
              scrollUp: {
                '0%': {
                  transform: 'translateY(0)',
                },
                '100%': {
                  transform: 'translateY(calc(-100% + 180px))',
                },
              },
              wave: {
                '0%, 100%': {
                  transform: 'translateY(0px)',
                },
                '50%': {
                  transform: 'translateY(-8px)',
                },
              },
              spin: {
                '0%': { transform: 'rotate(0deg)' },
                '100%': { transform: 'rotate(360deg)' },
              },
            }
    },
  },
  plugins: [],
}