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 ---

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)
- 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". 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 !!