--- title: "Utiliser Tailwind CSS 2, PurgeCSS avec Symfony et Webpack Encore" excerpt: "Vous avez envie de découvrir Tailwind CSS 2.0, mais vous ne savez pas comment l'installer dans un projet Symfony ? Je vous propose de découvrir comment mettre en place Tailwind CSS 2.0 et PurgeCSS dans un projet Symfony avec Webpack Encore." publishDate: 2020-11-25T00:00:00.000Z tags: ["css", "encore", "symfony", "tailwind", "webpack"] canonical: "https://yoandev.co/utiliser-tailwind-css-2-purgecss-avec-symfony-et-webpack-encore" --- ### Introduction J'ai suivi une formation Backend, et le Front n'est pas du tout ma spécialité, mais au quotidien, j'utilise généralement [Bootstrap](https://getbootstrap.com/), et je dois dire que jusqu'à présent ce Framework me suffit largement. Ceci dit, de plus en plus de monde disent tout le bien qu'ils pensent de [Tailwind CSS](https://tailwindcss.com/), et j'avais envie de tester par moi-même ! Histoire de faire les choses dans les règles de l'art, je vous propose d'utiliser **Tailwind** dans un projet **Symfony,** en utilisant **Webpack Encore** et **PurgeCSS** (qui est utilisé par Tailwind pour réduire la taille du fichier CSS, nous le verrons plus tard). ### Mise en place d'un projet Symfony Première étape, mettre en place un nouveau projet Symfony que l'on va appeler "tailwind". Pour cela on utilise la commande classique de la [CLI Symfony](https://symfony.com/download). ```shell symfony new tailwind --full ``` On lance le serveur de Symfony pour vérifier que tout est OK. ```shell symfony server:start -d ``` Et on vérifie dans un navigateur internet que tout est OK. Dans mon cas à l'adresse [http://127.0.0.1:8000](http://127.0.0.1:8000). ![](./images/image-19-1024x520.png) ### Installation de Webpack Encore Deuxième étape de notre découverte, l'installation de [Webpack Encore](https://symfony.com/doc/current/frontend.html). ```shell composer require symfony/webpack-encore-bundle ``` Une fois que Webpack Encore est en place, demandons à **npm** de nous télécharger les dépendances de base de Webpack Encore. (Nous aurions pu également utiliser **yarn**.) ```shell npm install ``` Notre projet Symfony est désormais capable d'utiliser Webpack pour compiler du JS, et dans le cas qui nous concerne du CSS. ### Installation de Tailwind CSS et PurgeCSS Il est temps d'installer Tailwind et PurgeCSS. Comme nous l'utilisons dans un contexte "Webpack", nous ajoutons et modifions un peu les commandes suggérées [dans la doc](https://tailwindcss.com/docs/installation) de Tailwind. ```shell npm install -D tailwindcss postcss-loader purgecss-webpack-plugin glob-all path autoprefixer ``` Qu'avons-nous installé avec cette commande ? - tailwindcss : Installation de [Tailwind](https://tailwindcss.com/docs/installation) - postcss-loader: Installation de PostCSS conformément à la [documentation Symfony](https://symfony.com/doc/current/frontend/encore/postcss.html) - purgecss-webpack: Cela permet d'utiliser [PurgeCSS avec Webpack](https://purgecss.com/plugins/webpack.html#installation) - glob-all: [https://www.npmjs.com/package/glob-all](https://www.npmjs.com/package/glob-all) - autoprefixer: Installation conformément à la doc de [Tailwind](https://tailwindcss.com/docs/installation) ### Fichier de configurations Pour que notre mise en place de Tailwind fonctionne, nous devons modifier quelques fichiers. Commençons par mettre en place un fichier **postcss.config.js** (à la racine de notre projet). ```js module.exports = { plugins: [ require('tailwindcss'), ], }; ``` Modifiions ensuite notre fichier **webpack.config.js**, en y ajoutant en début de fichier les références aux librairies que nous allons utiliser. ```js var Encore = require('@symfony/webpack-encore'); const PurgeCssPlugin = require('purgecss-webpack-plugin'); const glob = require('glob-all'); const path = require('path') ``` Toujours dans le fichier **webpack.config.js**, activons l'utilisation du **loader PostCSS** tel que décrit dans la documentation de [Webpack Encore](https://symfony.com/doc/current/frontend/encore/postcss.html). ```js .enablePostCssLoader() ``` Il nous faut également **importer les feuilles de style dans notre fichier CSS**, c'est quand même l'objectif lorsque l'on utilise un framework CSS ;-). Pour cela ajoutons ces quelques lignes à notre fichier **assets/styles/app.css**. ```js @import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities"; ``` ### Notre premier build À cette étape nous devrions être en mesure de lancer un premier build pour vérifier que notre configuration fonctionne. ```shell npm run build ``` _Suivant les cas, vous pouvez obtenir le message "**Error: PostCSS plugin tailwindcss requires PostCSS 8."**. Pour corriger le problème, Tailwind vous propose la solution dans la documentation officielle : [https://tailwindcss.com/docs/installation#post-css-7-compatibility-build](https://tailwindcss.com/docs/installation#post-css-7-compatibility-build)_ ### Une page de test Pour valider le bon fonctionnement de notre installation, nous allons mettre en place une page de test qui utilisera les possibilités du Tailwind CSS. ```shell symfony console make:controller Demo ``` Modifions le fichier "**templates/base.html.twig**" pour utiliser nos fichiers compilés par Webpack Encore. ```html {% block title %}Welcome!{% endblock %} {% block stylesheets %}{{ encore_entry_link_tags('app') }}{% endblock %} {% block body %}{% endblock %} {% block javascripts %}{{ encore_entry_script_tags('app') }}{% endblock %} ``` Récupérons un exemple de code utilisant Tailwind sur [tailwindui.com](https://tailwindui.com/components/marketing/sections/heroes) et ajoutons-le dans notre fichier "**templates/demo/index.html.twig**". ```html {% extends 'base.html.twig' %} {% block title %}Hello DemoController!{% endblock %} {% block body %}

Data to enrich your online business

Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.

Get started
Live demo
{% endblock %} ``` Ouvrons dans un navigateur internet, la route de notre page de démo (chez moi [https://127.0.0.1:8000/demo](https://127.0.0.1:8000/demo)) et constatons le bon fonctionnement. Cool non ?! ![](./images/image-20-1024x519.png) ### Optimisations du fichier CSS avec PurgeCSS Si vous êtes curieux, vous avez peut-être remarqué que le f**ichier CSS compilé par Webpack Encore pèse lourd**, très lourd même ! Sur mon poste, l**e fichier pèse 2.8 Mo** ! ![](./images/image-21.png) Pas d'inquiétudes ! À ce stade c'est tout à fait logique, puisque nous importons l'ensemble de Tailwind CSS, sans le nettoyer de tout ce que nous n'utilisons pas. C'est le moment de faire entrer **PurgeCSS**, dont la mission va consister à **supprimer tout le CSS inutile**, c’est-à-dire non-utiliser dans nos fichiers twig. On retrouve pas mal de documentation sur la mise en place de PurgeCSS avec [Webpack Encore](https://phproberto.com/en/41-integrating-purgecss-with-symfony-encore), mais le meilleur [bout de code](https://markrailton.com/blog/using-tailwind-css-and-purgecss-with-symfony-encore) que j'ai trouvé permet en plus de ne réaliser la purge du CSS que lors d'un build de prod, génial non !? Ajoutons donc, en fin du fichier **webpack.config.js** ces quelques lignes. ```js if (Encore.isProduction()) { Encore.addPlugin(new PurgeCssPlugin({ paths: glob.sync([ path.join(__dirname, 'templates/**/*.html.twig') ]), defaultExtractor: (content) => { return content.match(/[\w-/:]+(?