/ tailwind.config.ts
tailwind.config.ts
 1  import type { Config } from "tailwindcss";
 2  
 3  export default {
 4      darkMode: ["class"],
 5      content: [
 6      "./pages/**/*.{js,ts,jsx,tsx,mdx}",
 7      "./components/**/*.{js,ts,jsx,tsx,mdx}",
 8      "./app/**/*.{js,ts,jsx,tsx,mdx}",
 9    ],
10    theme: {
11    	extend: {
12    		colors: {
13    			background: 'hsl(var(--background))',
14    			foreground: 'hsl(var(--foreground))',
15    			card: {
16    				DEFAULT: 'hsl(var(--card))',
17    				foreground: 'hsl(var(--card-foreground))'
18    			},
19    			popover: {
20    				DEFAULT: 'hsl(var(--popover))',
21    				foreground: 'hsl(var(--popover-foreground))'
22    			},
23    			primary: {
24    				DEFAULT: 'hsl(var(--primary))',
25    				foreground: 'hsl(var(--primary-foreground))'
26    			},
27    			secondary: {
28    				DEFAULT: 'hsl(var(--secondary))',
29    				foreground: 'hsl(var(--secondary-foreground))'
30    			},
31    			muted: {
32    				DEFAULT: 'hsl(var(--muted))',
33    				foreground: 'hsl(var(--muted-foreground))'
34    			},
35    			accent: {
36    				DEFAULT: 'hsl(var(--accent))',
37    				foreground: 'hsl(var(--accent-foreground))'
38    			},
39    			destructive: {
40    				DEFAULT: 'hsl(var(--destructive))',
41    				foreground: 'hsl(var(--destructive-foreground))'
42    			},
43    			border: 'hsl(var(--border))',
44    			input: 'hsl(var(--input))',
45    			ring: 'hsl(var(--ring))',
46    			chart: {
47    				'1': 'hsl(var(--chart-1))',
48    				'2': 'hsl(var(--chart-2))',
49    				'3': 'hsl(var(--chart-3))',
50    				'4': 'hsl(var(--chart-4))',
51    				'5': 'hsl(var(--chart-5))'
52    			}
53    		},
54    		borderRadius: {
55    			lg: 'var(--radius)',
56    			md: 'calc(var(--radius) - 2px)',
57    			sm: 'calc(var(--radius) - 4px)'
58    		}
59    	}
60    },
61    plugins: [require("tailwindcss-animate")],
62  } satisfies Config;