{"id":56258,"date":"2022-04-26T08:24:18","date_gmt":"2022-04-26T07:24:18","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=56258&preview=true&preview_id=56258"},"modified":"2024-01-24T14:39:06","modified_gmt":"2024-01-24T13:39:06","slug":"tailwind-jit","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/tailwind-jit\/","title":{"rendered":"Ma\u00eetriser Tailwind CSS avec son mode Just-in-Time (JIT)"},"content":{"rendered":"

Les frameworks \u00e0 vocation utilitaire nous aident \u00e0 concevoir nos pages web plus rapidement, et Tailwind CSS<\/a> est devenu l’un des plus populaires. Mais \u00eatre populaire ne signifie pas \u00eatre parfait.<\/p>\n

L’utilisation de Tailwind CSS a pos\u00e9 quelques probl\u00e8mes, comme le fait d’avoir une feuille de style \u00e9norme pendant le d\u00e9veloppement et de devoir activer des variantes suppl\u00e9mentaires par nous-m\u00eames, entre autres. Une solution \u00e0 certains de ces d\u00e9fis sera notre objectif g\u00e9n\u00e9ral dans ce tutoriel.<\/p>\n

Dans ce tutoriel, nous parlerons d’une fonctionnalit\u00e9 tr\u00e8s importante du framework Tailwind CSS connue sous le nom de compilateur just-in-time, plus commun\u00e9ment appel\u00e9 compilateur JIT.<\/p>\n

Nous mettrons en \u00e9vidence les caract\u00e9ristiques et les avantages de l’utilisation du compilateur JIT de Tailwind CSS, la mani\u00e8re de l’activer, et nous verrons quelques exemples pratiques.<\/p>\n

Commen\u00e7ons.
\n

<\/div><\/kinsta-auto-toc><\/p>\n

Qu’est-ce que le compilateur CSS JIT (Just-in-Time) de Tailwind ?<\/h2>\n

Avant de parler du compilateur JIT, nous devons d’abord parler de Tailwind CSS.<\/p>\n

Tailwind CSS est un framework CSS ax\u00e9 sur l’utilit\u00e9, avec un ensemble de classes CSS pr\u00e9d\u00e9finies qui peuvent \u00eatre appliqu\u00e9es directement dans notre balisage pour acc\u00e9l\u00e9rer la conception des pages web et maintenir la coh\u00e9rence de la conception \u00e0 l’aide de syst\u00e8mes pr\u00e9d\u00e9finis.<\/p>\n

Avant la sortie du compilateur JIT, la taille de notre fichier CSS Tailwind g\u00e9n\u00e9r\u00e9 apr\u00e8s installation est g\u00e9n\u00e9ralement de 3 Mo. Cependant, \u00e0 mesure que vous continuez \u00e0 configurer et \u00e0 personnaliser Tailwind, la taille du fichier ne cesse de cro\u00eetre – dans certains cas, vous pouvez vous retrouver avec une feuille de style pouvant atteindre 15 Mo.<\/p>\n

Bien que tous nos styles inutilis\u00e9s soient purg\u00e9s en production, ce n’est pas le cas pendant le d\u00e9veloppement. Avec une feuille de style de 10 Mo, voire 20 Mo, nous risquons de rencontrer des probl\u00e8mes et d’entra\u00eener un ralentissement de nos outils de d\u00e9veloppement.<\/p>\n

Avec le compilateur JIT, les styles sont g\u00e9n\u00e9r\u00e9s \u00e0 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.<\/p>\n

Avantages de l’utilisation du mode JIT de Tailwind CSS<\/h2>\n

Dans cette section, nous allons aborder certains des avantages de l’utilisation du compilateur JIT. Ils comprennent :<\/p>\n

    \n
  1. Votre feuille de style est la m\u00eame en d\u00e9veloppement<\/a> et en production.<\/li>\n
  2. Temps de construction plus rapide.<\/li>\n
  3. Toutes les variantes sont activ\u00e9es par d\u00e9faut.<\/li>\n
  4. La compilation pendant le d\u00e9veloppement est beaucoup plus rapide.<\/li>\n
  5. Seuls les styles utilis\u00e9s sont g\u00e9n\u00e9r\u00e9s.<\/li>\n
  6. Les variantes peuvent \u00eatre empil\u00e9es.<\/li>\n
  7. Am\u00e9lioration des performances des outils de d\u00e9veloppement.<\/li>\n<\/ol>\n

    Inconv\u00e9nients de l’utilisation du compilateur JIT de Tailwind CSS<\/h2>\n

    Les limitations actuellement connues selon la documentation GitHub du compilateur JIT<\/a> sont les suivantes :<\/p>\n