tailwind.config.js

/** @type {import('tailwindcss').Config} */
const config = {
	content: ['./src/**/*.html', './src/**/*.tsx'],
	theme: {
		extend: {
			fontFamily: {
				sans: '-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif',
			},
			colors: {
				border: 'hsl(var(--border)/<alpha-value>)',
				input: 'hsl(var(--input)/<alpha-value>)',
				ring: 'hsl(var(--ring)/<alpha-value>)',
				background: 'hsl(var(--background)/<alpha-value>)',
				foreground: 'hsl(var(--foreground)/<alpha-value>)',
				primary: {
					DEFAULT: 'hsl(var(--primary)/<alpha-value>)',
					foreground: 'hsl(var(--primary-foreground)/<alpha-value>)',
				},
				secondary: {
					DEFAULT: 'hsl(var(--secondary)/<alpha-value>)',
					foreground: 'hsl(var(--secondary-foreground)/<alpha-value>)',
				},
				destructive: {
					DEFAULT: 'hsl(var(--destructive)/<alpha-value>)',
					foreground: 'hsl(var(--destructive-foreground)/<alpha-value>)',
				},
				muted: {
					DEFAULT: 'hsl(var(--muted)/<alpha-value>)',
					foreground: 'hsl(var(--muted-foreground)/<alpha-value>)',
				},
				accent: {
					DEFAULT: 'hsl(var(--accent)/<alpha-value>)',
					foreground: 'hsl(var(--accent-foreground)/<alpha-value>)',
				},
				popover: {
					DEFAULT: 'hsl(var(--popover)/<alpha-value>)',
					foreground: 'hsl(var(--popover-foreground)/<alpha-value>)',
				},
				card: {
					DEFAULT: 'hsl(var(--card)/<alpha-value>)',
					foreground: 'hsl(var(--card-foreground)/<alpha-value>)',
				},
			},
			borderRadius: {
				lg: 'var(--radius)',
				md: 'calc(var(--radius) - 2px)',
				sm: 'calc(var(--radius) - 4px)',
			},
		},
	},
	plugins: [],
};

export default config;