🧰 Story 1.2: configuration tailwind

This commit is contained in:
2026-02-04 15:24:08 +01:00
parent e3f062249b
commit e1395a235e
10 changed files with 1455 additions and 37 deletions

View File

@@ -2,7 +2,7 @@
## Status
Ready for Dev
review
## Story
@@ -22,37 +22,37 @@ Ready for Dev
## 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`
- [x] **Task 1 : Initialiser npm et installer les dépendances** (AC: 1)
- [x] Créer `package.json` avec `npm init -y`
- [x] Installer Tailwind CSS : `npm install -D tailwindcss postcss autoprefixer`
- [x] 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
- [x] **Task 2 : Créer la configuration Tailwind** (AC: 2, 7)
- [x] Créer `tailwind.config.js` avec les chemins PHP à scanner
- [x] Configurer la palette de couleurs personnalisée (primary, background, surface, text, etc.)
- [x] Configurer les polices (Inter, JetBrains Mono)
- [x] Configurer les tailles de texte personnalisées
- [x] 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`
- [x] **Task 3 : Créer le fichier CSS source** (AC: 3)
- [x] Créer `assets/css/input.css`
- [x] Ajouter les directives `@tailwind base`, `@tailwind components`, `@tailwind utilities`
- [x] Ajouter les styles de base dans `@layer base`
- [x] Ajouter les composants réutilisables dans `@layer components` (btn, card, input, badge, etc.)
- [x] Ajouter les animations dans `@layer utilities`
- [] **Task 4 : Configurer PostCSS** (AC: 1)
- [] Créer `postcss.config.js` avec tailwindcss et autoprefixer
- [x] **Task 4 : Configurer PostCSS** (AC: 1)
- [x] 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
- [x] **Task 5 : Configurer les scripts npm** (AC: 4, 5)
- [x] Ajouter le script `build` dans package.json
- [x] Ajouter le script `dev` (watch) dans package.json
- [x] 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
- [x] **Task 6 : Valider la taille du CSS** (AC: 6)
- [x] Exécuter `npm run build`
- [x] Vérifier que `output.css` < 50kb (6,4 Ko)
- [x] Vérifier que le purge fonctionne correctement
## Dev Notes
@@ -407,38 +407,40 @@ Créer un fichier HTML temporaire pour tester les classes :
| Date | Version | Description | Author |
|------|---------|-------------|--------|
| 2026-02-04 | 0.1 | Implementation story 1.2 | Amelia |
| 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)
GPT-5 Codex
### Debug Log References
_À compléter par le dev agent_
- tests/tailwind.test.ps1: Assert-True boolean cast fix
### Completion Notes List
- Package.json mis à jour (v2.0.0) avec scripts dev/build Tailwind
- package.json mis à jour 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)
- tailwind.config.js créé avec palette sombre, polices Inter/JetBrains Mono
- input.css avec @layer base/components/utilities et 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
- Build validé : output.css < 50 Ko
- Tests: `powershell -ExecutionPolicy Bypass -File tests/run.ps1`
### File List
| Fichier | Action |
|---------|--------|
| `package.json` | Modifié |
| `package-lock.json` | Modifié |
| `package.json` | Créé |
| `package-lock.json` | Créé |
| `tailwind.config.js` | Créé |
| `postcss.config.js` | Créé |
| `assets/css/input.css` | Créé |
| `assets/css/output.css` | Généré |
| `tests/tailwind.test.ps1` | Créé |
## QA Results