v3/tailwind.config.mjs at main · alt-del-code/v3 · 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
/** @type {import('tailwindcss').Config} */
export default {
	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
	darkMode: 'class',
	theme: {
	  extend: {
		colors: {
		  primary: {
			50: '#f0f9ff',
			100: '#e0f2fe',
			200: '#bae6fd',
			300: '#7dd3fc',
			400: '#38bdf8',
			500: '#0ea5e9',
			600: '#0284c7',
			700: '#0369a1',
			800: '#075985',
			900: '#0c4a6e',
		  },
		  accent: {
			orange: {
			  500: '#f97316',
			  600: '#ea580c',
			  700: '#c2410c',
			},
			steel: {
			  500: '#64748b',
			  600: '#475569',
			  700: '#334155',
			},
		  },
		  dark: {
			bg: '#0f172a',
			'bg-soft': '#1e293b',
			surface: '#1e293b',
			'surface-soft': '#334155',
			'text-primary': '#f8fafc',
			'text-secondary': '#cbd5e1',
		  },
		},
		fontFamily: {
		  sans: ['Poppins', 'system-ui', 'sans-serif'],
		  heading: ['Outfit', 'system-ui', 'sans-serif'],
		},
		animation: {
		  'spin-slow': 'spin 20s linear infinite',
		  'spin-slow-reverse': 'spin 25s linear infinite reverse',
		  'fade-in': 'fadeIn 0.5s ease-in-out',
		  'slide-up': 'slideUp 0.5s ease-out',
		},
		keyframes: {
		  fadeIn: {
			'0%': { opacity: '0' },
			'100%': { opacity: '1' },
		  },
		  slideUp: {
			'0%': { transform: 'translateY(20px)', opacity: '0' },
			'100%': { transform: 'translateY(0)', opacity: '1' },
		  },
		},
	  },
	},
	plugins: [
	  // Add responsive visibility utilities
	  function({ addUtilities }) {
		addUtilities({
		  '.content-visibility-auto': {
			'content-visibility': 'auto',
		  },
		  '.content-visibility-hidden': {
			'content-visibility': 'hidden',
		  },
		});
	  },
	],
	// Add performance optimizations
	future: {
	  hoverOnlyWhenSupported: true,
	  respectDefaultRingColorOpacity: true,
	},
  };