tailwind.config.ts

1import type { Config } from 'tailwindcss'
2
3const config: Config = {
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}
63export default config
64