DEV Community

loading...
Cover image for Utiliser Tailwind avec Parcel

Utiliser Tailwind avec Parcel

jean-smaug
Développeur frontend et collectionneur de Linkemon
Originally published at maximeblanc.fr Updated on ・2 min read

Nous allons voir comment intégrer le framework CSS Tailwind au sein d'un projet utilisant Parcel pour bundler ses sources.

yarn add --exact tailwindcss
yarn add --dev --exact parcel-bundler autoprefixer postcss
Enter fullscreen mode Exit fullscreen mode

Une fois les dépendances installées, nous allons devoir configurer Postcss afin de pouvoir utiliser toutes les fonctionnalités de Tailwind.

// postcss.config.js

module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")],
}
Enter fullscreen mode Exit fullscreen mode

Il faut maintenant créer un fichier de style et utiliser les directives @tailwind afin d'importer les différentes briques du framework.

/* style.css */

@tailwind base;

@tailwind components;

@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Dans le fichier index.html, il faut référencer le fichier style.css.

<!-- index.html -->

<!DOCTYPE html>

<html lang="fr">
  <head>
    <!-- ... -->
    <link rel="stylesheet" href="./style.css" />
  </head>

  <body>
    <h1 class="text-3xl">Jean Smaug</h1>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Il ne nous reste plus qu'a créer les scripts.

{
  ...
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  }
  ...
}
Enter fullscreen mode Exit fullscreen mode

On peut désormais générer une version de production de notre application avec un yarn build.

build-without-purge

Amélioration

Notre configuration fonctionne mais il y a un bémol. Notre application importe l'intégralité du CSS de Tailwind même si nous n'utilisons que quelques classes.

Le plugin parcel-plugin-purgecss permet de nettoyer notre code.
Il repose sur PurgeCSS, un outil capable de supprimer du fichier CSS les classes inutilisées dans le HTML.

yarn add --dev --exact parcel-plugin-purgecss
Enter fullscreen mode Exit fullscreen mode

Après l'installation on créé un fichier de configuration pour PurgeCSS

// purgecss.config.js

module.exports = {
  content: ["**/*.html"],
}
Enter fullscreen mode Exit fullscreen mode

Si on build de nouveau notre application, le fichier style.css ne fait désormais plus que ~2kb contre ~666kb précédemment.

build-with-purge

Conclusion

Parcel, c'est génial. Tailwind, c'est énorme. Alors immaginez les deux ensembles !
Si en plus de cela, nos fichiers CSS peuvent subir une cure amincissante digne de régime Dukan, alors on est au top.

Merci de m'avoir lu.

Discussion (0)