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