tailwind.config.ts

 1import type { Config } from 'tailwindcss'
 2
 3const config: Config = {
 4  darkMode: ['class'],
 5  content: ['./index.html', './src/**/*.{ts,tsx}'],
 6  theme: {
 7    extend: {
 8      fontFamily: {
 9        sans: ['ui-sans-serif', 'system-ui', 'sans-serif'],
10        mono: ['ui-monospace', 'SFMono-Regular', 'SF Mono', 'Menlo', 'monospace'],
11      },
12      colors: {
13        border: 'hsl(var(--border))',
14        input: 'hsl(var(--input))',
15        ring: 'hsl(var(--ring))',
16        background: 'hsl(var(--background))',
17        foreground: 'hsl(var(--foreground))',
18        primary: {
19          DEFAULT: 'hsl(var(--primary))',
20          foreground: 'hsl(var(--primary-foreground))',
21        },
22        secondary: {
23          DEFAULT: 'hsl(var(--secondary))',
24          foreground: 'hsl(var(--secondary-foreground))',
25        },
26        destructive: {
27          DEFAULT: 'hsl(var(--destructive))',
28          foreground: 'hsl(var(--destructive-foreground))',
29        },
30        muted: {
31          DEFAULT: 'hsl(var(--muted))',
32          foreground: 'hsl(var(--muted-foreground))',
33        },
34        accent: {
35          DEFAULT: 'hsl(var(--accent))',
36          foreground: 'hsl(var(--accent-foreground))',
37        },
38        popover: {
39          DEFAULT: 'hsl(var(--popover))',
40          foreground: 'hsl(var(--popover-foreground))',
41        },
42        card: {
43          DEFAULT: 'hsl(var(--card))',
44          foreground: 'hsl(var(--card-foreground))',
45        },
46      },
47      borderRadius: {
48        lg: 'var(--radius)',
49        md: 'calc(var(--radius) - 2px)',
50        sm: 'calc(var(--radius) - 4px)',
51      },
52      keyframes: {
53        'accordion-down': {
54          from: { height: '0' },
55          to: { height: 'var(--radix-accordion-content-height)' },
56        },
57        'accordion-up': {
58          from: { height: 'var(--radix-accordion-content-height)' },
59          to: { height: '0' },
60        },
61      },
62      animation: {
63        'accordion-down': 'accordion-down 0.2s ease-out',
64        'accordion-up': 'accordion-up 0.2s ease-out',
65      },
66    },
67  },
68  plugins: [
69    require('tailwindcss-animate'),
70    require('@tailwindcss/typography'),
71  ],
72}
73
74export default config