DEV Community

Cover image for Utiliser Tailwind avec Parcel
jean-smaug
jean-smaug

Posted on • Edited on • Originally published at maximeblanc.fr

3

Utiliser Tailwind avec Parcel

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.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up