Maîtrisez le CSS Tailwind avec son mode juste-à-temps (JIT)

Publié: 2022-04-23

Les frameworks axés sur les utilitaires nous aident à concevoir nos pages Web plus rapidement, et Tailwind CSS est devenu l'un des plus populaires. Mais être populaire ne veut pas dire perfection.

Il y avait quelques défis dans l'utilisation de Tailwind CSS, comme avoir une énorme feuille de style pendant le développement et 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 didacticiel, nous parlerons d'une fonctionnalité très importante du framework CSS Tailwind connue sous le nom de compilateur juste-à-temps, plus communément appelé compilateur JIT.

Nous mettrons en évidence les fonctionnalités et les avantages de l'utilisation du compilateur Tailwind CSS JIT, comment l'activer et verrons quelques exemples pratiques.

Commençons.


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

Avant de parler du compilateur juste-à-temps, nous devons d'abord parler de Tailwind CSS.

Tailwind CSS est un framework CSS utilitaire avec un ensemble de classes CSS prédéfinies qui peuvent être appliquées directement dans notre balisage pour accélérer la conception de 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 l'installation est généralement de 3 Mo maximum. Cependant, au fur et à mesure que vous configurez et personnalisez Tailwind, la taille du fichier ne cesse d'augmenter - 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 lors de la production, ce n'est pas le cas lors du développement. Avec une feuille de style aussi grande que 10 Mo ou même 20 Mo, nous sommes susceptibles de rencontrer des problèmes et de retarder nos outils de développement.

Avec le compilateur JIT, les styles sont générés au fur et à 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 Tailwind CSS JIT

Dans cette section, nous aborderons certains des avantages de l'utilisation du compilateur JIT. Ils incluent:

  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 Tailwind CSS JIT

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

  • Les options avancées de PurgeCSS ne sont pas prises en charge.
  • "Vous ne pouvez appliquer que des classes @apply qui font partie du noyau, générées par des plugins ou définies dans une règle @layer . Vous ne pouvez pas @apply des classes CSS arbitraires qui ne sont pas définies dans une règle @layer .
  • Seul PostCSS 8 est pris en charge.

La directive @apply est utilisée pour appliquer des classes utilitaires 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.

Découvrez une fonctionnalité très importante du framework CSS Tailwind, connue sous le nom de compilateur juste-à-temps, dans ce guide utile. Cliquez pour tweeter

Comment activer le mode Tailwind CSS JIT

Notez qu'au moment de la rédaction, la version 3 de Tailwind CSS est déjà sortie et est activée par défaut lorsque vous installez Tailwind CSS. Les explications ci-dessous pour activer le compilateur JIT ne s'appliquent pas à la version 3 et supérieure. 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 doit avoir la valeur '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 se concentrer est la partie où nous avons ajouté :

 mode : 'jit'

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

Une fois cela 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é que les outils de développement soient en retard sera également réduite au minimum et votre code se compile plus rapidement au fur et à mesure que vous construisez vos projets.

Ensuite, nous verrons quelques applications pratiques du compilateur JIT.

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

Une fois cela 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é que les outils de développement soient en retard sera également réduite au minimum et votre code se compile plus rapidement au fur et à mesure que vous construisez vos projets.

Ensuite, nous verrons quelques applications pratiques du compilateur JIT.

Comment utiliser le compilateur Tailwind CSS JIT

Nous verrons 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

Des cas peuvent survenir où nous préférerions utiliser des valeurs en dehors du système de conception déjà créé. Ces valeurs peuvent concerner nos couleurs, notre rembourrage, notre marge, notre largeur, etc.

Le compilateur JIT nous permet d'y parvenir en utilisant des valeurs arbitraires. Ces valeurs arbitraires nous permettent de sortir du système de conception et de définir nos propres valeurs personnalisées. Vous verriez ces valeurs dans cette syntaxe : [300px], [#FA8072].

Pour ce faire, nous devons imbriquer 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 deviez probablement d'abord 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 de fond saumon. Vous ne verriez pas une classe utilitaire Tailwind indiquant bg-salmon, mais nous pouvons définir cela en utilisant une valeur arbitraire.

Aux prises avec des temps d'arrêt et des problèmes WordPress ? Kinsta est la solution d'hébergement conçue pour vous faire gagner du temps ! Découvrez nos fonctionnalités

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 deux-points.

Voici un exemple:

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

Le code ci-dessus crée un bouton avec la propriété focus désactivée et devient bleu lorsqu'il est survolé.

Pseudo-éléments

Le compilateur JIT nous permet de styler un pseudo-élément. 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 de fond verte.

Couleurs de bordure par côté

En raison de considérations de taille de fichier, cette fonctionnalité a été laissée de côté initialement, 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 et des versions ultérieures, 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 est de suivre les instructions d'installation de la version actuelle, et c'est parti.

Qu'est-ce que le compilateur JIT... et comment peut-il améliorer votre site ? Ce guide a la réponse Cliquez pour tweeter

Résumé

Le compilateur JIT a porté le framework CSS Tailwind à un tout autre niveau. Sa sortie est 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 retarde nos outils de développement, car seuls les styles que nous utilisons réellement sont générés, le tout en déplacement.

Nous avons vu quelques exemples de nouvelles fonctionnalités telles que l'empilement de 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 chaque côté de la bordure d'un élément individuellement. Nous sommes loin d'avoir atteint les limites des capacités 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 de JIT pour votre propre travail.

Quels trucs sympas avez-vous construits en utilisant le compilateur JIT ? Partagez votre opinion dans les commentaires ci-dessous.