123 lines
3.9 KiB
JavaScript
123 lines
3.9 KiB
JavaScript
// // /** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
darkMode: ["class", '[data-theme="dark"]'],
|
|
content: [
|
|
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
|
],
|
|
theme: {
|
|
container: {
|
|
center: true,
|
|
padding: "1.5rem",
|
|
screens: {
|
|
"2xl": "1400px",
|
|
},
|
|
},
|
|
extend: {
|
|
colors: {
|
|
background: "var(--background)",
|
|
foreground: "var(--foreground)",
|
|
primary: {
|
|
DEFAULT: "var(--primary)",
|
|
dark: "var(--primary-dark)",
|
|
},
|
|
secondary: "var(--secondary)",
|
|
accent: "var(--accent)",
|
|
card: "var(--card)",
|
|
"card-foreground": "var(--card-foreground)",
|
|
border: "var(--border)",
|
|
ring: "var(--ring)",
|
|
muted: "var(--muted)",
|
|
"muted-foreground": "var(--muted-foreground)",
|
|
},
|
|
keyframes: {
|
|
"animate-in": {
|
|
"0%": { opacity: 0, transform: "translateY(10px)" },
|
|
"100%": { opacity: 1, transform: "translateY(0)" },
|
|
},
|
|
"animate-out": {
|
|
"0%": { opacity: 1, transform: "translateY(0)" },
|
|
"100%": { opacity: 0, transform: "translateY(10px)" },
|
|
},
|
|
shake: {
|
|
'0%, 100%': { transform: 'translateX(0)' },
|
|
'10%, 30%, 50%, 70%, 90%': { transform: 'translateX(-2px)' },
|
|
'20%, 40%, 60%, 80%': { transform: 'translateX(2px)' },
|
|
},
|
|
"slide-in-from-top": {
|
|
"0%": { transform: "translateY(-5%)" },
|
|
"100%": { transform: "translateY(0)" },
|
|
},
|
|
"slide-in-from-bottom": {
|
|
"0%": { transform: "translateY(5%)" },
|
|
"100%": { transform: "translateY(0)" },
|
|
},
|
|
"fade-in": {
|
|
"0%": { opacity: 0 },
|
|
"100%": { opacity: 1 },
|
|
},
|
|
},
|
|
animation: {
|
|
"animate-in": "animate-in 0.3s ease-out",
|
|
"animate-out": "animate-out 0.3s ease-in",
|
|
shake: 'shake 0.5s cubic-bezier(.36,.07,.19,.97) both',
|
|
"slide-in-from-top": "slide-in-from-top 0.3s ease-out, fade-in 0.3s ease-out",
|
|
"slide-in-from-bottom": "slide-in-from-bottom 0.3s ease-out, fade-in 0.3s ease-out",
|
|
"fade-in": "fade-in 0.3s ease-out",
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
// Plugin pour les animations
|
|
function ({ addUtilities, matchUtilities, theme }) {
|
|
addUtilities({
|
|
".animate-in": {
|
|
animationName: "animate-in",
|
|
animationDuration: "0.3s",
|
|
animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
|
|
animationFillMode: "forwards",
|
|
},
|
|
});
|
|
|
|
matchUtilities(
|
|
{
|
|
"fade-in": (value) => ({
|
|
opacity: 0,
|
|
animation: `fade-in ${value} ease-out forwards`,
|
|
}),
|
|
},
|
|
{ values: theme("transitionDuration") }
|
|
);
|
|
|
|
matchUtilities(
|
|
{
|
|
"slide-in-from-top": (value) => ({
|
|
transform: "translateY(-5%)",
|
|
animation: `slide-in-from-top ${value} ease-out forwards, fade-in ${value} ease-out forwards`,
|
|
}),
|
|
},
|
|
{ values: theme("transitionDuration") }
|
|
);
|
|
|
|
matchUtilities(
|
|
{
|
|
"slide-in-from-bottom": (value) => ({
|
|
transform: "translateY(5%)",
|
|
animation: `slide-in-from-bottom ${value} ease-out forwards, fade-in ${value} ease-out forwards`,
|
|
}),
|
|
},
|
|
{ values: theme("transitionDuration") }
|
|
);
|
|
|
|
matchUtilities(
|
|
{
|
|
delay: (value) => ({
|
|
animationDelay: value,
|
|
}),
|
|
},
|
|
{ values: theme("transitionDelay") }
|
|
);
|
|
},
|
|
],
|
|
}; |