Froidefond Julien
05a18c3c77
- Installation de Tailwind CSS v4 avec @tailwindcss/postcss - Configuration PostCSS avec le plugin Tailwind v4 - Mise à jour de globals.css avec syntaxe Tailwind v4 (@theme) - Migration layout.tsx vers classes Tailwind - Création du composant NavLink avec types stricts - Configuration des couleurs personnalisées (background, foreground, card, line, primary) - Support du dark mode via classes CSS - Variables CSS migrées vers format HSL - Suppression des anciens styles CSS custom Le projet utilise maintenant Tailwind CSS v4 pour tout le styling
73 lines
2.1 KiB
JavaScript
73 lines
2.1 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
darkMode: 'class',
|
|
content: [
|
|
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
|
],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
background: 'hsl(var(--background))',
|
|
foreground: 'hsl(var(--foreground))',
|
|
card: 'hsl(var(--card))',
|
|
line: {
|
|
DEFAULT: 'hsl(var(--line))',
|
|
strong: 'hsl(var(--line-strong))',
|
|
},
|
|
primary: {
|
|
DEFAULT: 'hsl(var(--primary))',
|
|
soft: 'hsl(var(--primary-soft))',
|
|
foreground: 'hsl(var(--foreground))',
|
|
},
|
|
muted: {
|
|
DEFAULT: 'hsl(var(--text-muted))',
|
|
foreground: 'hsl(var(--text-muted))',
|
|
},
|
|
success: {
|
|
DEFAULT: 'hsl(142 60% 45%)',
|
|
soft: 'hsl(142 60% 90%)',
|
|
},
|
|
warning: {
|
|
DEFAULT: 'hsl(45 93% 47%)',
|
|
soft: 'hsl(45 93% 90%)',
|
|
},
|
|
error: {
|
|
DEFAULT: 'hsl(2 72% 48%)',
|
|
soft: 'hsl(2 72% 90%)',
|
|
},
|
|
cyan: 'hsl(192 85% 55%)',
|
|
pink: 'hsl(338 82% 62%)',
|
|
},
|
|
fontFamily: {
|
|
sans: ['"Avenir Next"', 'Segoe UI', 'Noto Sans', 'system-ui', 'sans-serif'],
|
|
},
|
|
animation: {
|
|
'spin-slow': 'spin 2s linear infinite',
|
|
'pulse-slow': 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
|
'pulse-ring': 'pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
|
},
|
|
keyframes: {
|
|
'pulse-ring': {
|
|
'0%': { boxShadow: '0 0 0 0 hsl(var(--primary) / 0.4)' },
|
|
'50%': { boxShadow: '0 0 0 4px hsl(var(--primary) / 0)' },
|
|
'100%': { boxShadow: '0 0 0 0 hsl(var(--primary) / 0)' },
|
|
},
|
|
},
|
|
borderRadius: {
|
|
lg: '12px',
|
|
md: '8px',
|
|
sm: '6px',
|
|
},
|
|
boxShadow: {
|
|
'soft': '0 1px 2px 0 rgb(23 32 46 / 0.06)',
|
|
'card': '0 12px 30px -12px rgb(23 32 46 / 0.22)',
|
|
'dark-soft': '0 1px 2px 0 rgb(2 8 18 / 0.35)',
|
|
'dark-card': '0 12px 30px -12px rgb(2 8 18 / 0.55)',
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
}
|