Utiliser Tailwind CSS 3 avec Symfony 6

Article mis à jour le 12/07/2022 avec la mise à jour de Tailwind CSS 3 et de Symfony 6.

Tu as une application Symfony et tu veux y intégrer un peu de Sass et encore mieux : Tailwind CSS? Cet article est fait pour toi.

Installer Webpack Encore

Tout d’abord il va falloir installer Webpack Encore , une librairie javascript permettant d’intégrer très facilement Webpack à une application Symfony. Cet outil permet de compiler des dépendances front (CSS/JS) et de les intégrer dans le framework. Si tu veux en savoir plus, n’hésites pas a consulter la documentation.

Pour l’installer, rien de plus simple :

composer require symfony/webpack-encore-bundle
yarn install

Et voilà ! De nouveaux fichiers sont maintenant disponibles dans ton projet :

• webpack.config.js, c’est dans ce fichier que tu vas configurer Webpack (ajouter le support de Sass par exemple)
• assets/, c’est ici que tout tes fichiers CSS et JS seront.

Pour tester que tout fonctionne bien, tu peux faire la commande yarn dev afin de compiler ton CSS et ton JS pour ensuite te rendre sur l’URL de ton projet pour voir si la couleur du fond de ta page a bien changée.

Les commandes de Webpack

Webpack Encore met à disposition plusieurs commandes pratiques pour compiler notre code :

• yarn dev, celui que l’on vient d’utiliser, sert à compiler notre CSS/JS en mode développement
• yarn watch, très pratique, sert à compiler automatiquement à chaque changement sur un fichier source
• yarn build, pour compiler ses fichiers en production.

Utiliser Sass

Maintenant que tu as Webpack d’installer, tu vas pouvoir installer Sass.

C’est quoi Sass ?

Sass est un préprocesseur CSS, il te permet d’écrire du CSS plus confortablement et d’avoir accès a des fonctionnalités très pratiques telles que les mixins ou encore les conditions (if/else) et les boucles (for/foreach), tout comme dans un langage de programmation basique.

Pourquoi j’ai besoin de ça ?

Tu n’as pas forcément “besoin” de Sass pour installer Tailwind CSS, mais je te le recommande. Les deux vont super bien ensemble et tu me remerciera de t’avoir fait découvrir Sass si tu ne connaissais pas.

Installer Sass

Bon, maintenant que tu es convaincu, on va pouvoir passer à l’installation. Pour cela, rajoute simplement cette ligne dans ton fichier webpack.config.js :

Encore
    // ...

    // Enable Sass Support
    .enableSassLoader()

Ensuite, si tu essayes de faire un yarn dev, tu vas avoir des erreurs et Symfony va te proposer d’installer des paquets, il te suffit de suivre ces indications.

Et voilà, tu peux maintenant tester ta configuration en modifiant le fichier app.css de tes assets comme suit :

$body: lightgray;

body {
    background-color: $body;
}

Attention : Penses bien a renommer ton fichier app.css en app.scss et a modifier la ligne import './styles/app.css'; de ton fichier app.js en conséquence.

Enfin, tu peux retenter un yarn dev. Si tout se passe bien, alors Sass est bien installer dans ton projet, on peut passer à la suite.

Installer et configurer Tailwind CSS

Enfin la dernière étape : installer Tailwind CSS.

Installer PostCSS

Pour utiliser PostCSS, il faut tout d’abord l’installer : (autoprefixer est un plugin bien utile pour ajouter automatique les prefix navigateurs à ton CSS)

yarn add postcss-loader autoprefixer --dev

Ensuite, créer un fichier postcss.config.js à la racine de ton projet (au même niveau que webpack.config.js) :

module.exports = {
    plugins: {
        autoprefixer: {}
    }
}

Enfin, comme pour installer Sass , il faut ajouter une ligne dans le fichier webpack.config.js :

Encore
    // ...

    // Enable PostCSS Support
    .enablePostCssLoader()

Tu peux ensuite faire un yarn dev pour vérifier que tout fonctionne.

Tailwind CSS

Maintenant que PostCSS est installé, on peut passer à l’action et installer le framework CSS Tailwind CSS.

yarn add tailwindcss --dev

Ensuite, il faut ajouter tailwind css comme une “dépendance” de PostCSS, en éditant son fichier de configuration :

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Enfin concernant les fichiers de configuration, il faut générer le fichier de tailwind avec cette commande :

npx tailwindcss init

Celle-ci va générer la “base” du fichier de configuration du framework (tailwind.config.js), c’est dans ce fichier que tu vas pouvoir configurer les couleurs, etc.. de Tailwind afin que celui-ci colle parfaitement à ton site.

Attention, renseigne bien le chemin vers tes templates dans la partie content du fichier :

  content: ['./templates/**/*.html.twig'],

En effet, depuis Tailwind CSS 3 , le framework purge les classes CSS même en développement pour encore plus de performances grâce au “Just-In-Time”! Si tu veux en savoir plus, ils ont fait un article concernant cette fonctionnalité.

Et pour finir, il faut importer tailwindcss dans notre fichier app.scss :

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Et voilà, Tailwind CSS vient d’être installer. Tu peux tester si tout fonctionne bien avec le fameux yarn dev.

Tu peux maintenant tester ce framework CSS très populaire en ce moment et découvrir pourquoi.

Bonus : Tailwind CSS pour la production ?

Il est possible de compiler une version “allégée” de Tailwind CSS en production. Cela permet d’éviter de charger un trop gros fichier et charge uniquement ce dont ton site a besoin.

Depuis Tailwind CSS 3 , l’ optimisation est disponible par défaut, même en développement. Il est quand même nécessaire d’appliquer les changements qui suivent pour générer une version optimisé du CSS.

Pour cela, Tailwind CSS utilise PurgeCSS , un module permettant de supprimer le CSS inutilisé lors de la compilation. Ce module est déjà présent de base dans ce framework CSS, il suffit de l’activer dans la directive “content” du fichier de configuration :

module.exports = {
  content: ['./templates/**/*.html.twig'],
  theme: {},
  variants: {
    extend: {},
  },
  plugins: [],
}

Dans “content”, on passe simplement le chemin vers nos templates HTML. Lors de la compilation, Webpack va alors parcourir ces fichiers et générer uniquement les classes dont nous avons besoin.

Attention : Avant de faire la commande yarn build, il faut que node soit configuré en mode production , pour ce faire il suffit de taper : export NODE_ENV=production dans un terminal