Files
miracles_in_motion/tailwind.config.cjs
defiQUG 1b3793447a feat: initialize project with Tailwind CSS, React, and TypeScript setup
- Added Tailwind CSS configuration with custom theme colors and animations.
- Created global styles in index.css including custom scrollbar and button components.
- Set up main entry point in main.tsx to render the App component.
- Configured TypeScript with strict settings and path mapping.
- Added support for high contrast mode and reduced motion in styles.
- Included print styles for better printing experience.
2025-10-04 18:11:14 -07:00

70 lines
1.7 KiB
JavaScript

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
darkMode: 'class',
theme: {
extend: {
colors: {
primary: {
50: '#fdf4ff',
100: '#fae8ff',
200: '#f5d0fe',
300: '#f0abfc',
400: '#e879f9',
500: '#d946ef',
600: '#c026d3',
700: '#a21caf',
800: '#86198f',
900: '#701a75',
},
secondary: {
50: '#eff6ff',
100: '#dbeafe',
200: '#bfdbfe',
300: '#93c5fd',
400: '#60a5fa',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
800: '#1e40af',
900: '#1e3a8a',
},
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
animation: {
'marquee': 'marquee 30s linear infinite',
'float': 'float 6s ease-in-out infinite',
'pulse-slow': 'pulse-slow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
},
keyframes: {
marquee: {
'0%': { transform: 'translateX(100%)' },
'100%': { transform: 'translateX(-100%)' },
},
float: {
'0%, 100%': { transform: 'translateY(0px)' },
'50%': { transform: 'translateY(-10px)' },
},
'pulse-slow': {
'0%, 100%': { opacity: '1' },
'50%': { opacity: '0.5' },
},
},
boxShadow: {
'glow': '0 0 20px rgba(236, 72, 153, 0.3)',
'glow-lg': '0 0 40px rgba(236, 72, 153, 0.4)',
},
backdropBlur: {
xs: '2px',
},
},
},
plugins: [
require('@tailwindcss/typography'),
],
}