Utiliser TailwindCSS avec Symfony

Tu as une application Symfony et tu veux y intégrer un peu de Sass et encore mieux : TailwindCSS ? 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 TailwindCSS, 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 TailwindCSS

Enfin la dernière étape : installer TailwindCSS.

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.

TailwindCSS

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

A l’heure actuelle, Webpack Encore ne supporte pas PostCSS 8, il faut donc faire une installation un peu différente qu’habituellement :

yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat --dev

Ensuite, il faut ajouter tailwindcss 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.

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

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

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

Quand tu découvres pour la première fois TailwindCSS

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

Bonus : TailwindCSS pour la production ?

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

Pour cela, Tailwind 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 « purge » du fichier de configuration :

module.exports = {
  purge: {
    content: ['./templates/**/*.html.twig']
  },
  darkMode: false, // or 'media' or 'class'
  theme: {},
  variants: {
    extend: {},
  },
  plugins: [],
}

Dans « purge », on passe simplement le chemin vers nos templates HTML. Lors de la compilation en mode production, 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

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.