Maîtriser le CSS sous le vent et son mode en temps réel (JIT).
Le cadre utilitaire Priority nous aide à concevoir des pages Web plus rapidement et le CSS vent arrière est devenu l’un des cadres les plus populaires. Mais être populaire ne signifie pas être parfait. L’utilisation de Tailwind CSS pose certains défis, comme avoir une feuille de style géante pendant le développement, avoir à activer des variantes supplémentaires par vous – même, et ainsi de suite. Résoudre certains de ces défis sera l’objectif général de ce tutoriel. Dans ce tutoriel, nous discuterons d’une caractéristique très importante du cadre CSS Tailwind, à savoir le compilateur instantané, plus souvent appelé le compilateur JIT.
Nous nous concentrerons sur les caractéristiques et les avantages de l’utilisation du compilateur JIT CSS Tailwind et sur la façon de l’activer, et nous verrons quelques exemples pratiques. On y va. Qu’est – ce que le compilateur CSS – JIT Tailwind (instant)? Avant de parler du compilateur en temps réel, nous devons d’abord parler du CSS de sillage. Tailwind CSS est un cadre CSS pratique avec un ensemble de classes CSS prédéfinies qui peuvent être appliquées directement dans le balisage pour accélérer la conception du Web et maintenir la cohérence de la conception en utilisant un système prédéfini. Avant la publication du compilateur JIT, la taille du fichier CSS tail wind généré après l’installation est généralement jusqu’à 3 Mo. Cependant, au fur et à mesure que vous continuez à configurer et à personnaliser Tailwind, la taille du fichier continue de croître: dans certains cas, vous pourriez finir par obtenir une feuille de style de 15 Mo.
Bien que tous nos styles inutilisés aient été éliminés dans le processus de production, ce n’était pas le cas dans le processus de développement. Pour les feuilles de style de 10 Mo ou même 20 Mo, nous avons certainement des problèmes et des retards dans le développement des outils. Utilisez le compilateur JIT pour générer des styles lors de la construction d’un projet. Cela signifie que seules les classes d’outils actuellement utilisées sont incluses dans la taille du brouillard
Passif. Tous les autres exemples présentés dans ce tutoriel sont compatibles avec la version 3.
Il est facile d’activer le compilateur JIT. Tout ce que vous devez faire est de mettre à jour vos fichiers de vent arrière. Configuration. JS ajoute l’attribut mode avec la valeur attendue ‘JIT’. C’est comme ça que devrait être ton vent arrière. Configuration. Js: module. Export = {Pattern: {JIT ‘, clear: [‘ \/ public \/ *.Html ‘, dark Pattern: false, \/ \/ or \
Cela nous permet d’utiliser les fonctionnalités du compilateur JIT.
Une fois terminé, vous pouvez exécuter la commande Build et voir le rétrécissement du fichier. Le seul style que vous verrez est celui que vous utilisez. À mesure que la taille du fichier diminue, les feuilles de style restent inchangées pendant le développement et la production. La probabilité de retards dans les outils de développement sera également réduite au minimum, et votre code sera compilé plus rapidement lorsque le projet sera créé. Ensuite, nous verrons quelques applications réelles du compilateur JIT. Cela nous permet d’utiliser les fonctionnalités du compilateur JIT. Vous voulez savoir comment nous avons augmenté le trafic de plus de 1000%? Joignez – vous à plus de 20 000 personnes qui reçoivent nos communiqués de presse hebdomadaires pour donner des conseils aux experts WordPress!
Une fois terminé, vous pouvez exécuter la commande Build et voir que la taille du fichier diminue. Le seul style que vous verrez est celui que vous utilisez. À mesure que la taille du fichier diminue, les feuilles de style restent inchangées pendant le développement et la production. La probabilité de retards dans les outils de développement sera également réduite au minimum, et votre code sera compilé plus rapidement lorsque le projet sera créé. Ensuite, nous verrons quelques applications réelles du compilateur JIT. Comment utiliser le compilateur JIT C
Nous verrons quelques exemples pratiques du compilateur JIT dans cette section. Nous commencerons par nous aider à étendre n’importe quelle valeur du système de conception Tailwind.
N’importe quelle valeur dans certains cas, nous préférons utiliser des valeurs en dehors du système de conception que nous avons créé. Ces valeurs peuvent être utilisées pour la couleur, le remplissage, les marges, la largeur, etc. Le compilateur JIT nous permet de le faire en utilisant n’importe quelle valeur. Ces valeurs arbitraires nous permettent de quitter le système de conception et de définir nos propres valeurs personnalisées. Vous verrez ces valeurs dans la syntaxe suivante: [300px], [fa8072]. Pour ce faire, nous devons imbriquer les valeurs entre crochets afin que Tailwind sache que nous sommes en train de définir de nouvelles valeurs dans le système de conception. Voici un exemple:
Dans l’exemple ci – dessus, nous avons utilisé deux nouvelles valeurs de 300px et 500px qui n’existaient pas initialement dans le système de conception. Avant le compilateur JIT, vous devrez peut – être définir ces valeurs dans le fichier de configuration. JS pour obtenir le même effet. L’exemple suivant montre comment définir une nouvelle valeur de couleur, par exemple:
Cette section a un fond de saumon
Ici, nous créons un paragraphe avec le saumon comme couleur de fond. Vous ne verrez pas la classe d’utilité tail wind dire BG Salmon, mais nous pouvons la définir avec n’importe quelle valeur.
Lutter contre les temps d’arrêt et les problèmes de WordPress? Kinsta est une solution d’hébergement conçue pour gagner du temps! Pour le compilateur JIT, toutes les variables sont activées par défaut, de sorte que vous pouvez oublier d’utiliser le profil. JS pour activer certains. En outre, ces variantes peuvent être empilées pour obtenir d’excellents résultats. Chaque variable est séparée par deux points. Voici un exemple: