NOWEN/tailwind.config.js at main · cropflre/NOWEN · 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: 'class',
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
        serif: ['Playfair Display', 'Georgia', 'serif'],
        mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
      },
      colors: {
        // 从 CSS 变量引用主题颜色
        primary: {
          DEFAULT: 'var(--color-primary)',
          light: 'var(--color-primary-light)',
          dark: 'var(--color-primary-dark)',
        },
        accent: {
          DEFAULT: 'var(--color-accent)',
          light: 'var(--color-accent-light)',
        },
        // 背景色
        bg: {
          primary: 'var(--color-bg-primary)',
          secondary: 'var(--color-bg-secondary)',
          tertiary: 'var(--color-bg-tertiary)',
        },
        // 文字色
        text: {
          primary: 'var(--color-text-primary)',
          secondary: 'var(--color-text-secondary)',
          muted: 'var(--color-text-muted)',
        },
        // 边框色
        border: {
          DEFAULT: 'var(--color-border)',
          light: 'var(--color-border-light)',
        },
        // 玻璃效果
        glass: {
          DEFAULT: 'var(--color-glass)',
          border: 'var(--color-glass-border)',
          hover: 'var(--color-glass-hover)',
        },
        // 发光效果
        glow: {
          DEFAULT: 'var(--color-glow)',
          secondary: 'var(--color-glow-secondary)',
        },
        // 旧版星云色保留兼容
        nebula: {
          cyan: '#00f2fe',
          blue: '#4facfe',
          purple: '#667eea',
          pink: '#f093fb',
          orange: '#f5576c',
        }
      },
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'aurora': 'linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #667eea 100%)',
        'bg-gradient': 'var(--color-bg-gradient)',
      },
      boxShadow: {
        'theme': 'var(--color-shadow)',
        'theme-hover': 'var(--color-shadow-hover)',
        'glow': '0 0 30px var(--color-glow)',
        'glow-sm': '0 0 15px var(--color-glow)',
        'glow-md': '0 0 30px var(--color-glow)',
        'glow-lg': '0 0 60px var(--color-glow)',
        'glow-cyan': '0 0 40px rgba(0, 242, 254, 0.3)',
        'glow-pink': '0 0 40px rgba(240, 147, 251, 0.3)',
      },
      animation: {
        'gradient': 'gradient 15s ease infinite',
        'aurora': 'aurora 20s ease infinite',
        'float': 'float 6s ease-in-out infinite',
        'float-slow': 'float 8s ease-in-out infinite',
        'shimmer': 'shimmer 2s linear infinite',
        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
        'pulse-glow': 'pulse-glow 2s ease-in-out infinite',
        'spin-slow': 'spin 20s linear infinite',
        'spotlight': 'spotlight 2s ease .75s 1 forwards',
        'meteor': 'meteor 13s linear infinite',
        'border-beam': 'border-beam var(--duration, 12s) linear infinite',
      },
      keyframes: {
        gradient: {
          '0%, 100%': { backgroundPosition: '0% 50%' },
          '50%': { backgroundPosition: '100% 50%' },
        },
        aurora: {
          '0%, 100%': {
            backgroundPosition: '0% 50%',
            backgroundSize: '200% 200%',
          },
          '50%': {
            backgroundPosition: '100% 50%',
            backgroundSize: '200% 200%',
          },
        },
        float: {
          '0%, 100%': { transform: 'translateY(0px)' },
          '50%': { transform: 'translateY(-20px)' },
        },
        shimmer: {
          '0%': { backgroundPosition: '-200% 0' },
          '100%': { backgroundPosition: '200% 0' },
        },
        spotlight: {
          '0%': {
            opacity: 0,
            transform: 'translate(-72%, -62%) scale(0.5)',
          },
          '100%': {
            opacity: 1,
            transform: 'translate(-50%,-40%) scale(1)',
          },
        },
        meteor: {
          '0%, 3%': {
            transform: 'rotate(215deg) translate3d(0, 0, 0)',
            opacity: 0,
          },
          '6%': { opacity: 0.75 },
          '26%': { opacity: 0.38 },
          '34%': {
            transform: 'rotate(215deg) translate3d(-560px, 0, 0)',
            opacity: 0,
          },
          '100%': {
            transform: 'rotate(215deg) translate3d(-560px, 0, 0)',
            opacity: 0,
          },
        },
        'border-beam': {
          '100%': { offsetDistance: '100%' },
        },
        'border-beam-spin': {
          '0%': { transform: 'rotate(0deg)' },
          '100%': { transform: 'rotate(360deg)' },
        },
        'pulse-glow': {
          '0%, 100%': { boxShadow: '0 0 20px var(--color-glow)' },
          '50%': { boxShadow: '0 0 40px var(--color-glow)' },
        },
      },
    },
  },
  plugins: [],
}