28211 sujets

CSS et mise en forme, CSS3

Questions sur Tailwind CSS Version 4

Bonjour à tous,

Je viens de tomber sous le charme de Tailwind CSS récemment et j'ai décidé d'ignorer la version 3 et passer directement à la version 4.
Je l'ai installé sur un WordPress local pour expérimenter et ça fonctionne très bien, je génère correctement le fichier CSS final.

L'énorme avantage de Tailwind c'est qu'il génère uniquement le strict nécessaire code CSS en fonction des classes utilisées dans le code des pages web et fichiers js.

Par contre si on utilise une classe et qu'ensuite on la retire complétement dans le code, le code CSS conserve les déclarations qui ne sont plus utilisées...

Normalement il existe une fonction de 'purge' pour supprimer le CSS superflu mais je n'arrive pas à la trouver dans la doc de la version 4 mais je me suis aperçu qu'il suffit de stopper le script, effacer le fichier CSS de sortie et de relancer le script. Ainsi le fichier final est recréé avec seules les règles utilisées dans le code.

Question: Cette fonction de purge existe t-elle toujours et est elle vraiment nécessaire si il suffit d'effacer le fichier simplement ?


Dans la version 3 il y avait un fichier tailwing.config.js dans lequel on déclarait les types de fichiers qui doivent être 'sondés'.


 /** @type {import('tailwindcss').Config} dans la version 3 */
export default {
   content: ["./src/**/*.{html,js}"],
   theme: {
     extend: {},
   },
   plugins: [],
 }


Ce fichier n'existe plus avec la version 4, on dirait qu'il se débrouille tout seul pour trouver toutes les classes CSS dans les fichiers qui sont situés dans la même arborescence descendante du fichier package.json

Question: Peut-on contrôler manuellement (ou vérifier) quels sont les fichiers sondés par le script de Tailwind, pour éviter au moins de sonder des dossiers pour rien?

Merci ---
Modérateur
Salut,

Je vais faire un commentaire sur Tailwind et non sur la question :
- DOM trop lourd (c'est d'un ridicule....)
- facilité à déboguer
- Pour faire du css, tu dois sortir l'artillerie lourde (Javascript) Smiley eek
- Talwind ? C'est du style inline masqué par des class
- Tailwind ne gère pas le contexte. Bonne chance pour faire une app web multi univers

En lisant ton sujet, je lis que tu as la méthode "purge". Smiley eek Tout ça pour contrecarrer un problème de cette librairie.

Mon avis est : Il vaut mieux utiliser Bootstrap ou Zurb et surcharger.
Modifié par niuxe (14 Apr 2025 - 14:55)
niuxe a écrit :
Salut,

Je vais faire un commentaire sur Tailwind et non sur la question :
- DOM trop lourd (c'est d'un ridicule....)
- facilité à déboguer
- Pour faire du css, tu dois sortir l'artillerie lourde (Javascript) Smiley eek
- Talwind ? C'est du style inline masqué par des class
- Tailwind ne gère pas le contexte. Bonne chance pour faire une app web multi univers

En lisant ton sujet, je lis que tu as la méthode "purge". Smiley eek Tout ça pour contrecarrer un problème de cette librairie.

Mon avis est : Il vaut mieux utiliser Bootstrap ou Zurb et surcharger.


Bon... j'ai bien compris que tu n'aimais pas Tailwind....

DOM trop lourd: tu montres un cas extrême, c'est presque une blague, même... et dans les cas où le DOM est chargé il est possible de créer une nouvelle classe
avec la directive @apply.

(non)facilité à déboguer: quand tu as un problème, tu regardes directement le CSS qui est généré.

sortir l'artillerie lourde: Javascript est partout, je m'en sers souvent pour changer la classe d'un élément suite à un évènement, c'est pas rédhibitoire....

Je dis pas que Tailwind est meilleur que le reste mais il offre une alternative intéressante en ne créant que le style CSS nécessaire et il permet d'utiliser avec facilité des fonctionnalités CSS avancées.
Avec Bootstrap, je me retrouve souvent à créer des fichiers supplémentaires CSS volumineux qui deviennent vite le nid à du style redondant , contradictoire, ou non utilisé et au final avec 300Ko de CSS.

Pour le fait de multiplier les classes dans le DOM je ne pense pas que ce soit un gros problème, les PC d’aujourd’hui et les navigateurs sont performants et souvent, les plugins comme Elementor ou autres ajoutent autant, sinon plus, de classes que Tailwind.

De toutes façons je débute avec , je verrai bien...

-
C'est pas très très gentil Nuixe, toutes les libs modernes sont lourdes. Mais les débits depuis l'ADLS sont bien, la fibre se fait dans les foyers maintenant.

Moi j'ai fait du Tailwinde sur mon site d'architecture dans sa version avant je crois mais c'est chouette. Non un import de plu ou autre, je pense le package manager va résolve tout ça pour toi.

En tout cas go. go Tailwinde !!
Modérateur
lionel_css3 a écrit :


Bon... j'ai bien compris que tu n'aimais pas Tailwind....


Je suis de la vieille école. Je sépare le contenu de la mise en forme. J'utilise le contexte et bien sûr j'utilise des class helper.

LauraMariaWulf a écrit :

C'est pas très très gentil Nuixe

Avant même Tailwind, j'ai déjà expérimenté ce genre de pratique (c'était en 2015). Je suis arrivé au même point que les contraintes du style inline.

lionel_css3 a écrit :

DOM trop lourd: tu montres un cas extrême, c'est presque une blague,

C'est une blague. Un des liens vient d'alsacreations (billet écrit par Raphael) et l'autre, c'est une personne qui a édité un message sur LinkedIn

lionel_css3 a écrit :

...il est possible de créer une nouvelle classe
avec la directive @apply.

Je connais l'existence de cette directive. Autant faire du css puisque class tailwind est ni plus ni moins qu'un style !

Pire, c'est quand je lis bg-blue-500. Une des règles en CSS est de ne pas nommer explicitement le nom des couleurs. Demain, le client demande de changer la couleur bleue en rouge. Bonne chance ! Encore mieux, demain tu dois faire un multiunivers, c'est bonne chance avec ce truc !

lionel_css3 a écrit :

(non)facilité à déboguer: quand tu as un problème, tu regardes directement le CSS qui est généré.

Bien sûr il y a l'inspecteur dans le navigateur. Quand tu as une longuuuuue liste de class et que tu injectes en JS, plusieurs class pour créer un comportement, easy à déboguer....

lionel_css3 a écrit :

sortir l'artillerie lourde: Javascript est partout, je m'en sers souvent pour changer la classe d'un élément suite à un évènement, c'est pas rédhibitoire....


Pour une simple page sans que ce soit un SPA, quel est l'intérêt. (Il y a même des gens qui installent redux avant même d'installer React.... ) .

lionel_css3 a écrit :

Je dis pas que Tailwind est meilleur que le reste mais il offre une alternative intéressante en ne créant que le style CSS nécessaire et il permet d'utiliser avec facilité des fonctionnalités CSS avancées.
Avec Bootstrap, je me retrouve souvent à créer des fichiers supplémentaires CSS volumineux qui deviennent vite le nid à du style redondant , contradictoire, ou non utilisé et au final avec 300Ko de CSS.


C'est un problème de méthodologie et non un problème de ces librairies. Par exemple, lis le bouquin de Brad Frost sur l'Atomic Design. Tu apprendras réellement ce qu'est l'Atomic Design.

lionel_css3 a écrit :

Pour le fait de multiplier les classes dans le DOM je ne pense pas que ce soit un gros problème, les PC d’aujourd’hui et les navigateurs sont performants et souvent, les plugins comme Elementor ou autres ajoutent autant, sinon plus, de classes que Tailwind.


De nos jours et là où il faut prêter attention, c'est sur mobile. Demande-toi pourquoi sur des sites tels que radiofrance.fr, leroymerlin.fr, lesechos.fr, lefigaro.fr, tailwind est inexistant. Or, les DSI de ces projets peuvent faire un virage à 180° et utiliser ce qu'ils veulent. Ils ont les moyens.
lionel_css3 a écrit :

De toutes façons je débute avec , je verrai bien...

Que tu saches l'utiliser, c'est toujours un bon point. Tailwind est très simple. S'en servir pour tous les projets, c'est autre chose. Tailwind, c'est intéressant pour un POC ou un projet sur 2 ou 3 pages.
Prévenir un modérateur
Répondre au sujet
Aller à