/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
// Include design system components
'../design-system/src/**/*.{js,ts,jsx,tsx}',
],
// Extend design system theme
presets: [require('../design-system/tailwind.config.js')],
// Safelist category colors for expense charts
safelist: [
// Category bar colors
'bg-blue-500',
'bg-green-500',
'bg-yellow-500',
'bg-purple-500',
'bg-red-500',
'bg-gray-500',
// Category badge colors (with opacity)
'bg-blue-500/20',
'bg-green-500/20',
'bg-yellow-500/20',
'bg-purple-500/20',
'bg-red-500/20',
'bg-gray-500/20',
'text-blue-400',
'text-green-400',
'text-yellow-400',
'text-purple-400',
'text-red-400',
'text-gray-400',
// Average line colors
'border-red-500/70',
'border-green-500/70',
'border-blue-500/70',
'border-yellow-400/60',
'bg-yellow-400/20',
'text-yellow-400',
],
theme: {
extend: {
// Additional frontend-specific customizations
animation: {
'fade-in': 'fadeIn 0.5s ease-in-out',
'slide-up': 'slideUp 0.3s ease-out',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
slideUp: {
'0%': { transform: 'translateY(20px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
},
},
},
},
plugins: [],
};