tailwind.config.ts

import type {Config} from "tailwindcss"

const config = {
    darkMode: ["class"],
    content: ['./pages/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './app/**/*.{ts,tsx}', './src/**/*.{ts,tsx}',],
    prefix: "",
    theme: {
        container: {
            center: true, padding: '2rem', screens: {
                '2xl': '1400px'
            }
        }, extend: {
            colors: {
                border: 'hsl(var(--border))',
                input: 'hsl(var(--input))',
                ring: 'hsl(var(--ring))',
                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(--secondary-foreground))'
                },
                destructive: {
                    DEFAULT: 'hsl(var(--destructive))', foreground: 'hsl(var(--destructive-foreground))'
                },
                muted: {
                    DEFAULT: 'hsl(var(--muted))', foreground: 'hsl(var(--muted-foreground))'
                },
                accent: {
                    DEFAULT: 'hsl(var(--accent))', foreground: 'hsl(var(--accent-foreground))'
                },
                popover: {
                    DEFAULT: 'hsl(var(--popover))', foreground: 'hsl(var(--popover-foreground))'
                },
                card: {
                    DEFAULT: 'hsl(var(--card))', foreground: 'hsl(var(--card-foreground))'
                },
                chart: {
                    '1': 'hsl(var(--chart-1))',
                    '2': 'hsl(var(--chart-2))',
                    '3': 'hsl(var(--chart-3))',
                    '4': 'hsl(var(--chart-4))',
                    '5': 'hsl(var(--chart-5))'
                },
                sidebar: {
                    DEFAULT: 'hsl(var(--sidebar-background))',
                    foreground: 'hsl(var(--sidebar-foreground))',
                    primary: 'hsl(var(--sidebar-primary))',
                    'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
                    accent: 'hsl(var(--sidebar-accent))',
                    'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
                    border: 'hsl(var(--sidebar-border))',
                    ring: 'hsl(var(--sidebar-ring))'
                }
            }, borderRadius: {
                lg: 'var(--radius)', md: 'calc(var(--radius) - 2px)', sm: 'calc(var(--radius) - 4px)'
            }, keyframes: {
                'accordion-down': {
                    from: {
                        height: '0'
                    }, to: {
                        height: 'var(--radix-accordion-content-height)'
                    }
                }, 'accordion-up': {
                    from: {
                        height: 'var(--radix-accordion-content-height)'
                    }, to: {
                        height: '0'
                    }
                }, shine: {
                    '0%': {
                        'background-position': '0% 0%'
                    }, '50%': {
                        'background-position': '100% 100%'
                    }, to: {
                        'background-position': '0% 0%'
                    }
                }, gradient: {
                    to: {
                        backgroundPosition: 'var(--bg-size) 0'
                    }
                }, 'shiny-text': {
                    '0%, 90%, 100%': {
                        'background-position': 'calc(-100% - var(--shiny-width)) 0'
                    }, '30%, 60%': {
                        'background-position': 'calc(100% + var(--shiny-width)) 0'
                    }
                }, meteor: {
                    '0%': {
                        transform: 'rotate(215deg) translateX(0)', opacity: '1'
                    }, '70%': {
                        opacity: '1'
                    }, '100%': {
                        transform: 'rotate(215deg) translateX(-500px)', opacity: '0'
                    }
                }
            }, animation: {
                'accordion-down': 'accordion-down 0.2s ease-out',
                'accordion-up': 'accordion-up 0.2s ease-out',
                shine: 'shine var(--duration) infinite linear',
                gradient: 'gradient 8s linear infinite',
                'shiny-text': 'shiny-text 8s infinite',
                meteor: 'meteor 5s linear infinite'
            }
        }
    },
    plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config