4f38fa4496
Add smooth animations to form sections that appear when toggles are enabled, improving user experience with visual feedback. Changes: - Add expandFadeIn keyframe animation to Tailwind config - Apply expand-fade-in animation to UserSettingsForm payment sections - Apply expand-fade-in animation to LocationEditForm conditional fields - Update account page HomeIcon color from green to white for consistency 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
65 lines
1.4 KiB
TypeScript
65 lines
1.4 KiB
TypeScript
import type { Config } from 'tailwindcss';
|
|
|
|
const config: Config = {
|
|
content: [
|
|
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
|
],
|
|
theme: {
|
|
extend: {
|
|
gridTemplateColumns: {
|
|
'13': 'repeat(13, minmax(0, 1fr))',
|
|
},
|
|
colors: {
|
|
blue: {
|
|
400: '#2589FE',
|
|
500: '#0070F3',
|
|
600: '#2F6FEB',
|
|
},
|
|
},
|
|
animation: {
|
|
'expand-fade-in': 'expandFadeIn 0.3s ease-in-out forwards',
|
|
},
|
|
},
|
|
keyframes: {
|
|
shimmer: {
|
|
'100%': {
|
|
transform: 'translateX(100%)',
|
|
},
|
|
},
|
|
animateDown: {
|
|
'0%': {
|
|
opacity: '0',
|
|
transform: 'translateY(-15px)',
|
|
maxHeight: '0px',
|
|
},
|
|
'100%': {
|
|
opacity: '1',
|
|
transform: 'translateY(0)',
|
|
maxHeight: '200px',
|
|
},
|
|
},
|
|
expandFadeIn: {
|
|
'0%': {
|
|
opacity: '0',
|
|
transform: 'scaleY(0.95)',
|
|
},
|
|
'100%': {
|
|
opacity: '1',
|
|
transform: 'scaleY(1)',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
require("@tailwindcss/typography"),
|
|
require("daisyui")
|
|
],
|
|
daisyui: {
|
|
themes: ["dark", "night", "business", "dracula"], // only including dark themes
|
|
darkTheme: "dark", // default dark theme
|
|
}
|
|
};
|
|
export default config;
|