Les frameworks à vocation utilitaire nous aident à concevoir nos pages web plus rapidement, et Tailwind CSS est devenu l’un des plus populaires. Mais être populaire ne signifie pas être parfait.

L’utilisation de Tailwind CSS a posé quelques problèmes, comme le fait d’avoir une feuille de style énorme pendant le développement et de devoir activer des variantes supplémentaires par nous-mêmes, entre autres. Une solution à certains de ces défis sera notre objectif général dans ce tutoriel.

Dans ce tutoriel, nous parlerons d’une fonctionnalité très importante du framework Tailwind CSS connue sous le nom de compilateur just-in-time, plus communément appelé compilateur JIT.

Nous mettrons en évidence les caractéristiques et les avantages de l’utilisation du compilateur JIT de Tailwind CSS, la manière de l’activer, et nous verrons quelques exemples pratiques.

Commençons.

Qu’est-ce que le compilateur CSS JIT (Just-in-Time) de Tailwind ?

Avant de parler du compilateur JIT, nous devons d’abord parler de Tailwind CSS.

Tailwind CSS est un framework CSS axé sur l’utilité, avec un ensemble de classes CSS prédéfinies qui peuvent être appliquées directement dans notre balisage pour accélérer la conception des pages web et maintenir la cohérence de la conception à l’aide de systèmes prédéfinis.

Avant la sortie du compilateur JIT, la taille de notre fichier CSS Tailwind généré après installation est généralement de 3 Mo. Cependant, à mesure que vous continuez à configurer et à personnaliser Tailwind, la taille du fichier ne cesse de croître – dans certains cas, vous pouvez vous retrouver avec une feuille de style pouvant atteindre 15 Mo.

Bien que tous nos styles inutilisés soient purgés en production, ce n’est pas le cas pendant le développement. Avec une feuille de style de 10 Mo, voire 20 Mo, nous risquons de rencontrer des problèmes et d’entraîner un ralentissement de nos outils de développement.

Avec le compilateur JIT, les styles sont générés à mesure que nous construisons nos projets. Cela signifie que seules les classes utilitaires que vous utilisez actuellement seront incluses dans la taille de votre feuille de style, et non toutes les classes utilitaires fournies avec Tailwind CSS.

Avantages de l’utilisation du mode JIT de Tailwind CSS

Dans cette section, nous allons aborder certains des avantages de l’utilisation du compilateur JIT. Ils comprennent :

  1. Votre feuille de style est la même en développement et en production.
  2. Temps de construction plus rapide.
  3. Toutes les variantes sont activées par défaut.
  4. La compilation pendant le développement est beaucoup plus rapide.
  5. Seuls les styles utilisés sont générés.
  6. Les variantes peuvent être empilées.
  7. Amélioration des performances des outils de développement.

Inconvénients de l’utilisation du compilateur JIT de Tailwind CSS

Les limitations actuellement connues selon la documentation GitHub du compilateur JIT sont les suivantes :

  • Les options avancées de PurgeCSS ne sont pas prises en charge.
  • « Vous pouvez uniquement @apply classes qui font partie du noyau, générées par des extensions, ou définies dans une règle @layer. Vous ne pouvez pas @apply classes CSS arbitraires qui ne sont pas définies dans une règle @layer. »
  • Il existe uniquement un support pour PostCSS 8.

La directive @apply est utilisée pour appliquer des classes d’utilité dans notre CSS personnalisé. Ceci est utile lorsque nous définissons des styles CSS personnalisés mais que nous préférons utiliser certaines classes utilitaires déjà définies.Voici un exemple du fonctionnement de la directive @apply:

.my-custom-css {
  @apply text-green-500;
}

Dans le code ci-dessus, nous avons ajouté une couleur verte à une classe CSS personnalisée. La couleur verte a été appliquée à l’aide d’une classe utilitaire Tailwind.

Comment activer le mode JIT de Tailwind CSS

Notez qu’au moment de la rédaction de cet article, la version 3 de Tailwind CSS a déjà été publiée et est activée par défaut lorsque vous installez Tailwind CSS. Les explications ci-dessous concernant l’activation du compilateur JIT ne s’appliquent pas aux versions 3 et supérieures. Tous les autres exemples couverts dans ce tutoriel sont compatibles avec la version 3.

Il est assez facile d’activer le compilateur JIT. Tout ce que vous avez à faire est de mettre à jour votre fichier tailwind.config.js en ajoutant la propriété mode qui devrait avoir une valeur de « jit ».

Voici à quoi devrait ressembler votre tailwind.config.js :

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

La ligne sur laquelle il faut se concentrer est la partie où nous avons ajouté :

mode : 'jit'

Cela nous permet d’utiliser les fonctionnalités du compilateur JIT.

Une fois que c’est fait, vous pouvez exécuter la commande build et voir la taille de votre fichier diminuer. Les seuls styles que vous verrez seront ceux que vous utilisez.

Avec la taille réduite du fichier, votre feuille de style pendant le développement et la production sera la même. La possibilité de décalage des outils de développement sera également réduite au minimum et votre code se compile plus rapidement lorsque vous construisez vos projets.

Ensuite, nous verrons quelques applications pratiques du compilateur JIT.

Ceci nous permet d’utiliser les fonctionnalités du compilateur JIT.

Une fois que c’est fait, vous pouvez exécuter la commande build et voir la taille de votre fichier diminuer. Les seuls styles que vous verrez seront ceux que vous utilisez.

Avec la taille réduite du fichier, votre feuille de style pendant le développement et la production sera la même. La possibilité de décalage des outils de développement sera également réduite au minimum et votre code se compile plus rapidement lorsque vous construisez vos projets.

Ensuite, nous allons voir quelques applications pratiques du compilateur JIT.

Comment utiliser le compilateur JIT de Tailwind CSS

Nous allons voir quelques exemples pratiques du compilateur JIT dans cette section. Nous commencerons par des valeurs arbitraires qui nous aideront à étendre le système de conception de Tailwind.

Valeurs arbitraires

Il peut y avoir des cas où nous préférons utiliser des valeurs en dehors du système de conception déjà créé. Ces valeurs peuvent concerner nos couleurs, la marge intérieure, la marge, la largeur, etc.

Le compilateur JIT nous permet d’y parvenir grâce à l’utilisation de valeurs arbitraires. Ces valeurs arbitraires nous permettent de sortir du système de conception et de définir nos propres valeurs personnalisées, que vous verrez dans cette syntaxe : [300px], [#FA8072].

Pour cela, nous devons placer la valeur entre crochets afin que Tailwind sache que nous définissons de nouvelles valeurs dans notre système de conception. Voici un exemple ci-dessous :

<div class="mt-[300px] w-[500px]">
</div>

Dans l’exemple ci-dessus, nous avons utilisé deux nouvelles valeurs – 300px et 500px – qui n’existaient pas initialement dans le système de conception. Avant le compilateur JIT, vous auriez probablement dû commencer par définir ces valeurs dans le fichier config.js pour obtenir le même effet.

L’exemple suivant montre comment vous pouvez définir de nouvelles valeurs de couleur comme :

<p class="bg-[#FA8072] ">This paragraph has a salmon background </p>

Ici, nous avons créé un paragraphe avec une couleur d’arrière-plan saumon. Vous ne verriez pas une classe d’utilité Tailwind indiquant bg-salmon, mais nous sommes en mesure de la définir à l’aide d’une valeur arbitraire.

Variantes empilables

Avec le compilateur JIT, toutes les variantes sont activées par défaut. Vous pouvez donc oublier d’utiliser le fichier config.js pour en activer une. En plus de cela, les variantes peuvent être empilées pour obtenir des résultats impressionnants.

Chaque variante est séparée par un deux-points.

Voici un exemple :

<button class="sm:dark:disabled:focus:hover:bg-blue-300">

Le code ci-dessus crée un bouton dont la propriété focus est déséquilibrée et qui devient bleu lorsqu’on le survole.

Pseudo-éléments

Le compilateur JIT nous permet de styliser des pseudo-éléments. Les pseudo-éléments sont utilisés pour styliser des parties spécifiques d’un élément, comme le style de la première lettre d’un élément ou l’insertion de contenu avant/après un élément.

Voici quelques exemples :

<p class="first-letter:bg-green-600">
First letter will have a green color
</p>

Dans l’exemple ci-dessus, la première lettre « M » aura une couleur verte.

<p class="selection:bg-green-600">
Highlight this text to see a green color.
</p>

Lorsque vous mettez en surbrillance le texte du code ci-dessus, il aura une couleur d’arrière-plan verte.

Couleurs de bordure par côté

Pour des raisons de taille de fichier, cette fonctionnalité n’a pas été retenue au départ, mais cela a changé avec la sortie du compilateur JIT. Nous pouvons donner à chaque bordure une couleur différente.

Voyons un exemple de ceci :

<div class="border-2 border-t-red-400 border-r-blue-400 border-b-yellow-400 border-l-green-400">
</div>

Nous avons donné à notre div plusieurs couleurs de bordure – la bordure supérieure est rouge, la bordure droite est bleue, la bordure inférieure est jaune et la bordure gauche est verte.

Mode JIT dans Tailwind CSS version 3

À partir de la version 3 de Tailwind CSS, le compilateur JIT est activé par défaut lorsque nous installons Tailwind CSS. Nous n’avons donc pas à nous soucier de modifier quoi que ce soit dans le fichier tailwind.config.js. Cela nous permet d’accéder à toutes les fonctionnalités du compilateur JIT en déplacement. Tout ce que nous avons à faire, c’est de suivre les instructions d’installation de la version actuelle, et nous sommes prêts à fonctionner.

Résumé

Le compilateur JIT a fait passer le framework CSS Tailwind à un tout autre niveau. Sa sortie a été accompagnée de nouvelles fonctionnalités utiles pour améliorer notre utilisation du framework. Nous n’avons plus à nous soucier de la taille de nos fichiers, si lourde qu’elle fait perdre du temps à nos outils de développement, puisque seuls les styles que nous utilisons réellement sont générés, le tout à la volée.

Nous avons vu quelques exemples des nouvelles fonctionnalités comme l’empilement des variantes, le style des éléments à l’aide de pseudo-éléments, l’utilisation de valeurs arbitraires pour étendre notre système de conception et la fonctionnalité très demandée – la possibilité de styliser individuellement chaque côté de la bordure d’un élément. Nous sommes loin d’avoir atteint les limites des capacités du JIT de Tailwind ici, donc vos prochaines étapes seront de tester par vous-même et d’explorer comment vous pouvez exploiter au mieux les fonctionnalités du JIT pour votre propre travail.

Quelles sont les choses sympas que vous avez construites en utilisant le compilateur JIT ? Partagez vos réflexions dans les commentaires ci-dessous.

Ihechikara Abba

Ihechikara est développeur de logiciels et rédacteur technique. Il aime écrire des articles sur les technologies web, la programmation et les sujets similaires. Connectez-vous avec Ihechikara sur X.