ETQ dev je veux faire une refacto tailwind du front

[ludovicdmt]

Comportement attendu

En l'état le code est difficilement maintenable. Il faut refacto le main.css pour définir des classes plus générales et réutilisables afin d'en réduire le nombre.

• virer de main.css ce qui devrait être dans des composants
• exemples pour simplifier l'utilisation des échelles et des textes dans main.css

@for $i from 0 through 10 {
  .bg-scale-#{$i} {
    background-color: var(--color-scale-#{$i});
  }
}

@for $color in ("off-white", "dark-green", "light-green", "brown", "white", "red") {
  .text-#{$color} {
    color: var(--color-#{$color});
  }
}

• utiliser les variables générés (ex .text-light-green pour remplacer les text-[var(--color-light-green)])
• Refacto pour n'utiliser que du rem pour les tailles et pas de px

[Marc-AntoineA]

D'après le créateur de Tailwind, on ne devrait pas avoir besoin de @apply .

Par ailleurs, depuis Tailwind 4, il semblerait qu'on ne puisse plus facilement utiliser certains apply (comme p-4) dans le bloc <style> du composant vue : lire une discussion à ce sujet sur Github.

Assez (voire très) partagé sur l'utilisation de Tailwind sur ce projet.

---

En plus des tâches précédentes, il faut enlever le style spécifique de main.css.

[ludovicdmt]

Retirer tailwind et repasser en scss ?

[maxbellec]

on ne devrait pas avoir besoin de @apply

Ce n'est pas ce que veut dire l'auteur, cette phrase c'est de la provocation pour dire que plutôt que faire une classes CSS réutilisable, il faut faire des composant html/css réutilisable. Ce qui est plutôt juste, mais on peut faire les deux.

depuis Tailwind 4, il semblerait qu'on ne puisse plus facilement utiliser certains apply (comme p-4)

c'est un bogue temporaire et facilement contournable, pas un argument pour ne pas utiliser apply

[maxbellec]

c'est sûr qu'actuellement la majorité des classes n'ont rien à faire dans main.css, par exemple les popin-... et feedback-... doivent être dans leurs composants respectifs

main.css (ou autre fichier global) ne doit contenir que des styles partagés entre de nombreux composants (comme les .button) et la configuration globale (comme la typo du body)

[maxbellec]

exemples pour simplifier l'utilisation des échelles et des textes dans main.css

@for $i from 0 through 10 {
  .bg-scale-#{$i} {
    background-color: var(--color-scale-#{$i});
  }
}

@for $color in ("off-white", "dark-green", "light-green", "brown", "white", "red") {
  .text-#{$color} {
    color: var(--color-#{$color});
  }
}