AccueilActualités informatiqueUn vent de fraîcheur : le framework CSS Tailwind 3.0 est sorti...

Un vent de fraîcheur : le framework CSS Tailwind 3.0 est sorti avec un compilateur JIT

TailwindCSS 3.0 est sorti et rompt avec l’ancien moteur AOT (Ahead-of-Time), le mode Just-in-Time (JIT) est désormais le nouveau standard pour le framework. Avec le compilateur JIT, l’équipe Tailwind mise sur la vitesse grâce, par exemple, aux expressions régulières. La mise en cache joue également un rôle plus important, par exemple un match LRU enregistre, en plus de la lecture heuristique, des matchs dans des lignes individuelles, ce qui devrait permettre de réduire les temps de construction incrémentiels.

Sommaire

Le framework met l’accent sur le fait d’effectuer le styling directement à partir du balisage plutôt que d’attribuer des classes CSS spécifiques aux composants. La plupart des nouvelles fonctionnalités s’inscrivent dans cet esprit.

Selon les éditeurs, la version majeure apporte aux développeurs un large choix de nouvelles fonctions comme la conception native de formulaires selon leurs propres idées ou une interface pour le scroll-snapping avec CSS pur (Cascading Style Sheets), de nouvelles propriétés CSS et un Content Delivery Network (Play CDN) expérimental. Autre nouveauté : la possibilité d’embellir le texte des pages web avec des soulignages en couleur et de contrôler davantage la sortie imprimée des pages web directement à partir du code HTML. Un exemple de code illustre ce dont il s’agit :

<div>
  <article class="print:hidden">
    <h1>My Secret Pizza Recipe</h1>
    <p>This recipe is a secret, and must not be shared with anyone</p>
    <!-- ... -->
  </article>
  <div class="hidden print:block">
    Are you seriously trying to print this? It's secret!
  </div>
</div>

En outre, la version contient une mise en page multi-colonnes dans le style des journaux imprimés (par exemple pour les journaux en ligne). Avec le code suivant

<div class="columns-1 sm:columns-3 ...">
  <p>...</p>
  <!-- ... -->
</div>

permet de définir l’affichage en colonnes sur le web :

Mehrspaltiges Layout von Webseiten im Stil einer Tageszeitung mit Tailwind 3.0

Mise en page multi-colonnes de pages web dans le style d’un quotidien avec Tailwind 3.0

(Image : Tailwind)

Tailwind 3.0 permet également de contrôler le sens d’écriture – de gauche à droite (LTR) ou, comme par exemple en arabe et en hébreu, de droite à gauche (RTL). Cette fonction est toutefois encore considérée comme expérimentale. En outre, le billet de blog annonçant l’événement met l’accent sur les aspects visuels des fonctions permettant de personnaliser le design des pages web. Ainsi, la gamme de couleurs disponibles devrait être fortement élargie (every color out of the box) et les éléments tels que les boutons ou les boîtes peuvent désormais être recouverts d’ombres colorées. Selon le blog post, cette fonctionnalité était très demandée, mais apparemment difficile à mettre en œuvre sur le plan technique.

Selon les développeurs de Tailwind, la palette de couleurs était jusqu’à présent limitée pour une bonne raison : Avant l’introduction du nouveau moteur, il s’agissait de réduire au maximum la taille des fichiers CSS, raison pour laquelle, selon le billet de blog, il fallait accepter de faire des concessions sur le choix des couleurs au profit d’une meilleure performance. La version 3.0 du framework propose désormais toutes les couleurs de la palette étendue par défaut, y compris des nuances de gris très fines (ou « fifty shades of gray », selon les termes de l’équipe).

TailwindCSS 3.0 : Le fondateur du projet Adam Wathan présente la version majeure

Tailwind Labs met à disposition le code source du framework sur GitHub. Pour ceux qui cherchent à s’orienter dans la profusion de nouveautés ou qui souhaitent se plonger dans Tailwind pour la première fois, l’équipe Tailwind propose une documentation révisée sur le travail avec le framework CSS. Le billet de blog annonçant la sortie de Tailwind 3.0 est la liste la plus claire de ce qu’il faut savoir sur la version majeure, avec des liens vers des informations approfondies et des exemples de code.

Plus d'articles