| import type { Config } from 'tailwindcss'; |
|
|
| const config: Config = { |
| content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], |
| darkMode: 'class', |
| theme: { |
| extend: { |
| fontFamily: { |
| sans: ['Geist Sans', 'Inter', 'system-ui', 'sans-serif'], |
| }, |
| colors: { |
| background: 'hsl(var(--background))', |
| foreground: 'hsl(var(--foreground))', |
| primary: { |
| DEFAULT: 'hsl(var(--primary))', |
| foreground: 'hsl(var(--primary-foreground))', |
| }, |
| secondary: { |
| DEFAULT: 'hsl(var(--secondary))', |
| foreground: 'hsl(var(--foreground))', |
| }, |
| border: 'hsl(var(--border))', |
| card: { |
| DEFAULT: 'hsl(var(--card))', |
| foreground: 'hsl(var(--foreground))', |
| }, |
| muted: { |
| DEFAULT: 'hsl(var(--muted))', |
| foreground: 'hsl(var(--muted-foreground))', |
| }, |
| hero: { |
| heading: 'hsl(var(--hero-heading))', |
| sub: 'hsl(var(--hero-sub))', |
| }, |
| destructive: { |
| DEFAULT: 'hsl(0 84% 60%)', |
| foreground: 'hsl(0 0% 98%)', |
| }, |
| }, |
| borderRadius: { |
| lg: 'var(--radius)', |
| md: 'calc(var(--radius) - 2px)', |
| sm: 'calc(var(--radius) - 4px)', |
| }, |
| keyframes: { |
| marquee: { |
| '0%': { transform: 'translateX(0%)' }, |
| '100%': { transform: 'translateX(-50%)' }, |
| }, |
| 'fade-in': { |
| '0%': { opacity: '0', transform: 'translateY(10px)' }, |
| '100%': { opacity: '1', transform: 'translateY(0)' }, |
| }, |
| 'slide-in-right': { |
| '0%': { transform: 'translateX(100%)' }, |
| '100%': { transform: 'translateX(0)' }, |
| }, |
| pulse: { |
| '0%, 100%': { opacity: '1' }, |
| '50%': { opacity: '0.5' }, |
| }, |
| }, |
| animation: { |
| marquee: 'marquee 20s linear infinite', |
| 'fade-in': 'fade-in 0.5s ease-out', |
| 'slide-in-right': 'slide-in-right 0.3s ease-out', |
| pulse: 'pulse 2s ease-in-out infinite', |
| }, |
| }, |
| }, |
| plugins: [require('tailwindcss-animate')], |
| }; |
|
|
| export default config; |
|
|