Optimiser son CSS dans une application Symfony, avec Tailwind ou PurgeCSS

Salutation 🙂,

À la fin de mon dernier article, je vous disais que j'irais plus loin sur l'optimisation du CSS. Sauf qu'entre temps les choses ont changé quelque peu ...

À la base, cette semaine, ce n'était pas cet article qui était prévu

Et oui, l'article de base était "comment utiliser Tailwind avec Symfony", mais le programme a changé.
Je vais vous expliquer pourquoi :

Je ne sais pas faire de projet simple type "Todo List" ou un "hello world", tout simplement, car je me demande sans cesse "mais à quoi ça sert ?" quand je code, de ce fait, j'essaie toujours de créer des choses utiles quand j'essaie de nouvelles technologies :

• Ce site internet et le site Marchand : La première fois que je codais un CMS en mettant dedans toutes les connaissances accumulées depuis 10 ans sur le SEO. C'est là l'intérêt de ces projets, sortir sur Google.
• La fromagerie en ligne : La première fois que j'utilisais Sylius, auquel j'y ai ajouté ma sauce pour lui permettre de se référencer correctement sur Google.
• L'application de réservation pour restaurant : La première fois que j'utilisais Turbo et Stimulus dans un projet Symfony, puis on a été plus loin, on a est arrivé sur les stores des smartphones via “Turbo Native”, aujourd’hui cette application est utilisée et elle rend service 🙂.

Comme vous l'aurez compris, à chaque fois que je teste une nouvelle technologie, je tente de créer un projet utile avec, et cette fois ça ne déroge pas à la règle, avec Josselin, nous travaillons sur une application pour trouver un bar en fonction de ses goûts et ses envies (quelle boisson ? il y a des planches apéros ?).
Je reviendrais sur ce projet dans de prochains articles, ne vous inquiétez pas 😁.

Au début, on voulait utiliser Tailwind pour le faire, mais, vu que j'ai beaucoup de chose sur le feu en ce moment, on a fait un rétropédalage et on n'utilisera pas Tailwind, on restera avec Bootstrap, et, on utilisera “PurgeCSS” sur ce projet.

Cependant, intégrer Tailwind au projet Symfony, j'ai déjà travaillé sur cette partie, de ce fait, il y aura quand même un peu de Tailwind dans cet article (voir beaucoup, en fait).

Utiliser Tailwind pour optimiser son CSS

Tailwind, de base, ne contient que des classes utilitaires, pas de classe de composant (comme le “btn” de Bootstrap), le binaire de Tailwind, lit votre code HTML et ajoute au fichier CSS les classes que vous utilisez, et uniquement ces classes.

Deux manières d'intégrer Tailwind dans votre projet Symfony

Avec le TailwindBundle

La première méthode consiste à utiliser le TailwindBundle .

Pour cette méthode, je vous laisse lire la documentation que vous retrouverez en cliquant sur le lien ci-dessus. En effet, ce n'est pas la solution que j'ai retenue.

Avec “Webpack Encore”

C'est la solution que j'utilise moi, elle me permet plus de flexibilité, de rajouter des choses à ma sauce ... bref, je préfère cette solution.

Pour cela, dans un premier temps, il faudra installer le “WebpackEncoreBundle”

Une fois cela fait, il faudra installer Tailwind avec "npm", puis l'initialiser

Dans votre configuration webpack.config.js, il faudra activer "enablePostCssLoader", comme dans le fichier ci-dessous :

Une fois cela fait, configurez le fichier "tailwind.config.js", ce fichier va vous permettre de définir ou se situe le JavaScript et l'HTML de votre projet, ensuite Tailwind va aller lire ces fichiers et en extraire les classes CSS que vous utilisez.

Dans un projet Symfony, nos fichiers Twig contiennent notre HTML dans "./templates/**/*.html.twig", et les fichiers contenant du JavaScript (qui peuvent donc contenir des classes CSS), qui se situe dans "./assets/**/*.js".
(les deux étoiles signifient qu'il peut y avoir un ou plusieurs dossiers à cet endroit-là)

Importez Tailwind dans votre CSS :

Enfin, il faut bien évidemment penser à importer le résultat dans votre fichier "base.html.twig" :

Peut-être que chez vous ce fichier ne s'appelle pas comme ça, vous l'avez peut être appelé autrement, mais l'idée est Simplement d'ajouter l'import dans votre tag "head".

Enfin, vous pouvez tester votre intégration avec :

À ce moment-là vous pourrez profiter de Tailwind dans votre projet Symfony.

Tailwind et les classes de composants

Par défaut, Tailwind ne propose que des classes utilitaires, c'est-à-dire, qu'il n'y a pas de "btn" ou encore de "card", comme vous pouvez l'avoir dans un framework comme Bootstrap, mais pas d'inquiétude, il y a une solution à ça.

Il existe, des plugins ou encore des "presets" qui vont vous permettre de retrouver la simplicité des "btn" de Bootstrap, le plus connu est Daisy UI

Pour l'installer, utilisez la commande ci-dessous :

Une fois installé, ajouter le plugin à votre tailwind.config.js :

Ça reste très simple, il suffit d'ajouter le plugin dans le tableau "plugins".

Maintenant, vous pouvez directement accéder aux composants de Daisy UI, vous n'avez qu'à utiliser les classes dans votre HTML et Tailwind se chargera de n'importer que les classes que vous utilisez.

Utiliser PurgeCSS pour optimiser son CSS

Après Tailwind, on va voir comment optimiser son CSS, mais avec n'importe quel autre framework, comme Bootstrap, par exemple.

PurgeCSS fait un peu comme Tailwind, il va regarder le CSS généré, regarder vos fichiers HTML et créer un fichier CSS qui ne contient que les classes utilisées (et donc, supprimer toutes les classes inutiles).

On va encore avoir besoin du “WebpackEncoreBundle”, comme avec Tailwind :

Une fois le bundle installé, on installe PurgeCSS et PostCSS :

Il ne nous reste plus qu'à configurer le fichier "postcss.config.js" qui se situe à la racine de votre projet :

Et là, si vous avez lu la partie sur Tailwind, vous devriez voir un petit air de famille, en effet, on va chercher nos HTML et notre JavaScript dans les mêmes dossiers.

On n’oublie pas une petite chose, il faut aussi ajouter “enablePostCssLoader” dans votre fichier "webpack.config.js", je reprends le même fichier que dans la partie Tailwind :

C'est tout bon un simple petit "npm run watch”, et votre CSS sera optimisé par PurgeCSS.

En développement, vous pouvez peut-être commenter "enablePostCssLoader" dans votre fichier "webpack.config.js", pour accélérer le temps de "build" de vos "assets".

Conclusion

D'un article qui normalement ne devait se concentrer que sur Tailwind, on se retrouve avec un article qui parle de Tailwind, et, pour ceux qui souhaite rester sur un autre framework CSS (ou sans framework) peuvent également dès la conception de leurs applications Symfony, optimiser leur CSS.

On se retrouve bientôt pour un prochain article, à très bientôt 😁.