Utiliser Tailwindcss mode JIT avec Symfony

Tailwind CSS v2.1 introduit un nouveau compilateur Just in Time pour Tailwind CSS qui génère vos styles à la demande au fur et à mesure que vous créez vos pages au lieu de tout générer à l'avance au moment du build initial.

Dans cette article nous verrons comment utiliser Tailwind dans un projet Symfony en prenant l'avantage du mode JIT.

Pour ce faire rassurez-vous que vous avez Webpack encore d'installé sur votre projet, si ce n'est pas le cas taper le commande suivante pour l'installer

composer require symfony/webpack-encore-bundle

Ensuite nous devons installer Tailwind et quelques paquets important pour son bon fonctionnement

yarn add tailwindcss postcss-loader postcss-import autoprefixer -D

Une fois Tailwind installé, nous allons le configurer pour utiliser le fameux mode JIT, pour créer une configuration de base tapez la commande

npx tailwind init --full

Ceci aura pour effet de créer un fichier tailwind.config.js à la racine du projet, pour activer le mode just in time, mettez l'option mode à 'jit' dans la configuration tailwind.config.js que nous venons à peine de créer.

module.exports = {
+   mode: 'jit',
    ...
}

Étant donné que le mode JIT génère le CSS à la demande en analysant les fichiers de vues (templates), il est essentiel que nous configurions l'option purge dans le fichier tailwind.config.js avec tous les chemins d'accès à nos templates, sinon le CSS généré sera vide :

module.exports = {
    mode: 'jit',
+   purge: {
+       content : ['./templates/**/*.html.twig'],
+   },
    ...
}

En soit, Tailwind au delà d'être un framework CSS, c'est d'abord un plugin PostCSS voilà pourquoi nous devons aussi configurer PostCSS pour utiliser tailwind et toutes ses directives personnalisées

créez un fichier postcss.config.js à la racine du projet, et importez Tailwind en précisant le chemin vers la configuration de ce dernier, nous importons aussi autoprefixer pour rajouter les préfixes vendor automatiquement au CSS qui sera généré afin de supporter un grand nombre de navigateur.

const tailwindcss = require('tailwindcss');

module.exports = {
    plugins: [
        tailwindcss('./tailwind.config.js'),
        require('autoprefixer'),
        require('postcss-import')
    ]
}

Enfin il suffit d'activer PostCSS dans notre configuration Webpack en précisant le chemin vers la configuration PostCSS

.enablePostCssLoader((config) => {
    config.postcssOptions = {
    path: './postcss.config.js'
    };
});

Et voilà

Références

• Tailwindcss JIT : https://tailwindcss.com/docs/just-in-time-mode