446 lines
11 KiB
Markdown
446 lines
11 KiB
Markdown
# Story 1.2: Configuration de Tailwind CSS avec CLI
|
|
|
|
## Status
|
|
|
|
Ready for Dev
|
|
|
|
## Story
|
|
|
|
**As a** développeur,
|
|
**I want** configurer Tailwind CSS avec le CLI et le build optimisé,
|
|
**so that** je bénéficie d'un CSS performant avec purge automatique.
|
|
|
|
## Acceptance Criteria
|
|
|
|
1. Node.js et npm sont utilisés uniquement pour le build (pas en production)
|
|
2. `tailwind.config.js` est créé avec les chemins des fichiers PHP à scanner
|
|
3. Le fichier `assets/css/input.css` contient les directives Tailwind (@tailwind base, components, utilities)
|
|
4. La commande `npm run build` génère `assets/css/output.css` minifié
|
|
5. Une commande `npm run dev` permet le développement en temps réel (watch)
|
|
6. Le fichier CSS généré fait moins de 50kb après purge
|
|
7. La palette de couleurs personnalisée est configurée (thème sombre)
|
|
|
|
## Tasks / Subtasks
|
|
|
|
- [] **Task 1 : Initialiser npm et installer les dépendances** (AC: 1)
|
|
- [] Créer `package.json` avec `npm init -y`
|
|
- [] Installer Tailwind CSS : `npm install -D tailwindcss postcss autoprefixer`
|
|
- [] Vérifier que `node_modules/` est dans `.gitignore`
|
|
|
|
- [] **Task 2 : Créer la configuration Tailwind** (AC: 2, 7)
|
|
- [] Créer `tailwind.config.js` avec les chemins PHP à scanner
|
|
- [] Configurer la palette de couleurs personnalisée (primary, background, surface, text, etc.)
|
|
- [] Configurer les polices (Inter, JetBrains Mono)
|
|
- [] Configurer les tailles de texte personnalisées
|
|
- [] Configurer les ombres personnalisées
|
|
|
|
- [] **Task 3 : Créer le fichier CSS source** (AC: 3)
|
|
- [] Créer `assets/css/input.css`
|
|
- [] Ajouter les directives `@tailwind base`, `@tailwind components`, `@tailwind utilities`
|
|
- [] Ajouter les styles de base dans `@layer base`
|
|
- [] Ajouter les composants réutilisables dans `@layer components` (btn, card, input, badge, etc.)
|
|
- [] Ajouter les animations dans `@layer utilities`
|
|
|
|
- [] **Task 4 : Configurer PostCSS** (AC: 1)
|
|
- [] Créer `postcss.config.js` avec tailwindcss et autoprefixer
|
|
|
|
- [] **Task 5 : Configurer les scripts npm** (AC: 4, 5)
|
|
- [] Ajouter le script `build` dans package.json
|
|
- [] Ajouter le script `dev` (watch) dans package.json
|
|
- [] Tester les deux scripts
|
|
|
|
- [] **Task 6 : Valider la taille du CSS** (AC: 6)
|
|
- [] Exécuter `npm run build`
|
|
- [] Vérifier que `output.css` < 50kb (6,4 Ko)
|
|
- [] Vérifier que le purge fonctionne correctement
|
|
|
|
## Dev Notes
|
|
|
|
### Dépendances npm (devDependencies uniquement)
|
|
|
|
```json
|
|
{
|
|
"devDependencies": {
|
|
"tailwindcss": "^3.4.0",
|
|
"postcss": "^8.4.0",
|
|
"autoprefixer": "^10.4.0"
|
|
}
|
|
}
|
|
```
|
|
|
|
### Configuration tailwind.config.js Complète
|
|
|
|
```javascript
|
|
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: [
|
|
'./*.php',
|
|
'./pages/**/*.php',
|
|
'./templates/**/*.php',
|
|
'./assets/js/**/*.js'
|
|
],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: {
|
|
DEFAULT: '#FA784F',
|
|
light: '#FB9570',
|
|
dark: '#E5623A',
|
|
},
|
|
background: '#17171F',
|
|
surface: {
|
|
DEFAULT: '#1E1E28',
|
|
light: '#2A2A36',
|
|
},
|
|
border: '#3A3A48',
|
|
text: {
|
|
primary: '#F5F5F7',
|
|
secondary: '#A1A1AA',
|
|
muted: '#71717A',
|
|
},
|
|
success: '#34D399',
|
|
warning: '#FBBF24',
|
|
error: '#F87171',
|
|
info: '#60A5FA',
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
mono: ['JetBrains Mono', 'monospace'],
|
|
},
|
|
fontSize: {
|
|
'display': ['2.5rem', { lineHeight: '1.2', fontWeight: '700' }],
|
|
'heading': ['2rem', { lineHeight: '1.3', fontWeight: '600' }],
|
|
'subheading': ['1.5rem', { lineHeight: '1.4', fontWeight: '600' }],
|
|
'body': ['1rem', { lineHeight: '1.6', fontWeight: '400' }],
|
|
'small': ['0.875rem', { lineHeight: '1.5', fontWeight: '400' }],
|
|
},
|
|
maxWidth: {
|
|
'content': '1280px',
|
|
},
|
|
boxShadow: {
|
|
'card': '0 4px 20px rgba(0, 0, 0, 0.25)',
|
|
'card-hover': '0 10px 40px rgba(0, 0, 0, 0.3)',
|
|
'input-focus': '0 0 0 3px rgba(250, 120, 79, 0.2)',
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
}
|
|
```
|
|
|
|
### Configuration postcss.config.js
|
|
|
|
```javascript
|
|
module.exports = {
|
|
plugins: {
|
|
tailwindcss: {},
|
|
autoprefixer: {},
|
|
}
|
|
}
|
|
```
|
|
|
|
### Contenu assets/css/input.css
|
|
|
|
```css
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
html {
|
|
@apply scroll-smooth;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-text-primary font-sans antialiased;
|
|
}
|
|
|
|
h1 { @apply text-display text-text-primary; }
|
|
h2 { @apply text-heading text-text-primary; }
|
|
h3 { @apply text-subheading text-text-primary; }
|
|
p { @apply text-body text-text-secondary; }
|
|
|
|
a {
|
|
@apply text-primary hover:text-primary-light transition-colors duration-150;
|
|
}
|
|
|
|
:focus-visible {
|
|
@apply outline-none ring-2 ring-primary ring-offset-2 ring-offset-background;
|
|
}
|
|
|
|
::selection {
|
|
@apply bg-primary/30 text-text-primary;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
/* Container */
|
|
.container-content {
|
|
@apply max-w-content mx-auto px-4 sm:px-6 lg:px-8;
|
|
}
|
|
|
|
/* Boutons */
|
|
.btn {
|
|
@apply inline-flex items-center justify-center gap-2
|
|
px-6 py-3 font-medium rounded-lg
|
|
transition-all duration-150
|
|
focus:outline-none focus:ring-2 focus:ring-offset-2
|
|
focus:ring-offset-background
|
|
disabled:opacity-50 disabled:cursor-not-allowed;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply btn bg-primary text-background
|
|
hover:bg-primary-light active:bg-primary-dark
|
|
focus:ring-primary;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply btn border-2 border-primary text-primary bg-transparent
|
|
hover:bg-primary hover:text-background
|
|
focus:ring-primary;
|
|
}
|
|
|
|
.btn-ghost {
|
|
@apply btn text-primary bg-transparent
|
|
hover:text-primary-light hover:bg-surface-light
|
|
focus:ring-primary;
|
|
}
|
|
|
|
/* Badges */
|
|
.badge {
|
|
@apply inline-flex items-center px-2.5 py-1
|
|
text-xs font-medium rounded
|
|
bg-surface-light text-text-secondary;
|
|
}
|
|
|
|
.badge-primary {
|
|
@apply bg-primary/20 text-primary;
|
|
}
|
|
|
|
.badge-muted {
|
|
@apply bg-border text-text-muted;
|
|
}
|
|
|
|
/* Cartes */
|
|
.card {
|
|
@apply bg-surface rounded-lg overflow-hidden
|
|
border border-border/50
|
|
transition-all duration-200;
|
|
}
|
|
|
|
.card-interactive {
|
|
@apply card cursor-pointer
|
|
hover:-translate-y-1 hover:shadow-card-hover
|
|
hover:border-border;
|
|
}
|
|
|
|
.card-body {
|
|
@apply p-4 sm:p-6;
|
|
}
|
|
|
|
/* Inputs */
|
|
.input {
|
|
@apply w-full px-4 py-3
|
|
bg-surface border border-border rounded-lg
|
|
text-text-primary placeholder-text-muted
|
|
transition-all duration-150
|
|
focus:outline-none focus:border-primary focus:shadow-input-focus;
|
|
}
|
|
|
|
.input-error {
|
|
@apply border-error focus:border-error
|
|
focus:shadow-[0_0_0_3px_rgba(248,113,113,0.2)];
|
|
}
|
|
|
|
.textarea {
|
|
@apply input min-h-[150px] resize-y;
|
|
}
|
|
|
|
.label {
|
|
@apply block text-sm font-medium text-text-secondary mb-2;
|
|
}
|
|
|
|
.label-required::after {
|
|
content: '*';
|
|
@apply text-error ml-1;
|
|
}
|
|
|
|
.error-message {
|
|
@apply text-sm text-error mt-1.5 flex items-center gap-1;
|
|
}
|
|
|
|
/* Sections */
|
|
.section {
|
|
@apply py-16 sm:py-24;
|
|
}
|
|
|
|
.section-header {
|
|
@apply text-center mb-12;
|
|
}
|
|
|
|
.section-title {
|
|
@apply text-heading mb-4;
|
|
}
|
|
|
|
.section-subtitle {
|
|
@apply text-body text-text-secondary max-w-2xl mx-auto;
|
|
}
|
|
|
|
/* Témoignage */
|
|
.testimonial {
|
|
@apply bg-surface-light rounded-lg p-6 border-l-4 border-primary;
|
|
}
|
|
|
|
/* Breadcrumb */
|
|
.breadcrumb {
|
|
@apply flex items-center gap-2 text-sm text-text-muted;
|
|
}
|
|
|
|
.breadcrumb-link {
|
|
@apply text-text-secondary hover:text-primary transition-colors;
|
|
}
|
|
|
|
.breadcrumb-current {
|
|
@apply text-text-primary;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.6s ease-out forwards;
|
|
}
|
|
|
|
.animate-fade-in-up {
|
|
animation: fadeInUp 0.6s ease-out forwards;
|
|
}
|
|
|
|
.animation-delay-100 { animation-delay: 100ms; }
|
|
.animation-delay-200 { animation-delay: 200ms; }
|
|
.animation-delay-300 { animation-delay: 300ms; }
|
|
|
|
.aspect-thumbnail {
|
|
aspect-ratio: 16 / 9;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* Accessibilité - Réduction de mouvement */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
```
|
|
|
|
### Scripts package.json
|
|
|
|
```json
|
|
{
|
|
"scripts": {
|
|
"dev": "tailwindcss -i ./assets/css/input.css -o ./assets/css/output.css --watch",
|
|
"build": "tailwindcss -i ./assets/css/input.css -o ./assets/css/output.css --minify"
|
|
}
|
|
}
|
|
```
|
|
|
|
### Palette de Couleurs (Thème Sombre)
|
|
|
|
| Couleur | Hex | Usage |
|
|
|---------|-----|-------|
|
|
| Primary | `#FA784F` | CTA, liens, accents |
|
|
| Primary Light | `#FB9570` | Hover |
|
|
| Primary Dark | `#E5623A` | Active/pressed |
|
|
| Background | `#17171F` | Fond de page |
|
|
| Surface | `#1E1E28` | Cartes, navbar |
|
|
| Surface Light | `#2A2A36` | Hover cartes |
|
|
| Border | `#3A3A48` | Bordures |
|
|
| Text Primary | `#F5F5F7` | Titres |
|
|
| Text Secondary | `#A1A1AA` | Texte secondaire |
|
|
| Text Muted | `#71717A` | Placeholders |
|
|
|
|
## Testing
|
|
|
|
### Validation Manuelle
|
|
|
|
- [ ] `npm install` s'exécute sans erreur
|
|
- [ ] `npm run build` génère `output.css`
|
|
- [ ] `npm run dev` lance le watch mode
|
|
- [ ] Le fichier `output.css` < 50kb
|
|
- [ ] Les classes Tailwind fonctionnent dans le navigateur
|
|
|
|
### Commandes de Test
|
|
|
|
```bash
|
|
# Installer les dépendances
|
|
npm install
|
|
|
|
# Build production
|
|
npm run build
|
|
|
|
# Vérifier la taille du CSS
|
|
ls -lh assets/css/output.css
|
|
|
|
# Lancer le watch pour le dev
|
|
npm run dev
|
|
```
|
|
|
|
### Test Visuel
|
|
|
|
Créer un fichier HTML temporaire pour tester les classes :
|
|
- `.btn-primary` → bouton orange
|
|
- `.bg-background` → fond sombre #17171F
|
|
- `.text-primary` → texte orange
|
|
- `.card` → carte avec fond surface
|
|
|
|
## Change Log
|
|
|
|
| Date | Version | Description | Author |
|
|
|------|---------|-------------|--------|
|
|
| 2026-01-22 | 0.1 | Création initiale de la story | Sarah (PO) |
|
|
|
|
## Dev Agent Record
|
|
|
|
### Agent Model Used
|
|
|
|
Claude Opus 4.5 (claude-opus-4-5-20251101)
|
|
|
|
### Debug Log References
|
|
|
|
_À compléter par le dev agent_
|
|
|
|
### Completion Notes List
|
|
|
|
- Package.json mis à jour (v2.0.0) avec scripts dev/build Tailwind
|
|
- Dépendances installées : tailwindcss ^3.4.0, postcss ^8.4.0, autoprefixer ^10.4.0
|
|
- tailwind.config.js créé avec palette couleurs sombre, polices Inter/JetBrains Mono
|
|
- input.css complet avec @layer base, components (btn, card, input, badge, etc.), utilities (animations)
|
|
- postcss.config.js configuré
|
|
- Build validé : output.css = 6,4 Ko (< 50 Ko requis)
|
|
- Warning normal : pas encore de fichiers PHP utilisant les classes
|
|
|
|
### File List
|
|
|
|
| Fichier | Action |
|
|
|---------|--------|
|
|
| `package.json` | Modifié |
|
|
| `package-lock.json` | Modifié |
|
|
| `tailwind.config.js` | Créé |
|
|
| `postcss.config.js` | Créé |
|
|
| `assets/css/input.css` | Créé |
|
|
| `assets/css/output.css` | Généré |
|
|
|
|
## QA Results
|
|
|
|
_À compléter par le QA agent_
|