Un aperçu des nouvelles fonctionnalités TailwindCSS v3

Intro

Tailwind CSS v3.0 vient d’être publié et ils ont ajouté beaucoup de fonctionnalités intéressantes, alors regardons-les.

Le JIT est maintenant intégré

Le mod JIT est maintenant intégré à TailwindCSS, il est donc beaucoup plus rapide et permet également de nouvelles fonctionnalités comme les variantes empilables et le support des valeurs arbitraires.

Beaucoup de nouvelles couleurs

Il y a beaucoup de nouvelles couleurs maintenant et elles sont 22 au total !

image.png

Il y a aussi 5 gris différents maintenant ! 🤯

image.png

Ombres colorées

L’ombrage coloré était une fonctionnalité importante qui n’était pas disponible dans tailwind jusqu’à la version 3, mais elle est enfin disponible et si facile à utiliser 😀

<button class="shadow-lg shadow-green-500 text-center bg-green-500 text-white px-8 py-3 rounded-full text-xl">Button</button>

Quelques classes peuvent vous donner ce beau bouton…

image.png

Rapport d’aspect

Maintenant, vous n’avez pas besoin d’utiliser de plugins pour utiliser la classe d’aspect, vous pouvez utiliser les différents types fournis comme- aspect-video, aspect-auto, aspect-squareou utilisez des valeurs personnalisées comme aspect-[9/6] car le JIT est maintenant intégré.

Défilement rapide

Il s’agit d’une excellente fonctionnalité qui vous permet d’avoir une liste d’éléments défilants qui s’enclenchent au centre, au début ou à la fin. Dans cette démo, j’utilise l’accrochage au centre.

<div class="snap-x flex overflow-scroll">
  <img
    class="mx-5 snap-center w-[1000px]"
    src="https://images.unsplash.com/photo-1604537466158-719b1972feb8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80"
  />
  <img
    class="mx-5 snap-center w-[1000px]"
    src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1174&q=80"
  />

  <img
    class="mx-5 snap-center w-[1000px]"
    src="https://images.unsplash.com/photo-1444464666168-49d633b86797?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80"
  />
  <img
    class="mx-5 snap-center w-[1000px]"
    src="https://images.unsplash.com/photo-1559213237-6fdea41b7308?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
  />
</div>

Cela donnera un bel effet de défilement rapide comme ceci

Comportement de défilement

Vous pouvez désormais ajouter un défilement fluide dans le CSS de tailwind en ajoutant l’option scroll-smooth . Si vous souhaitez ajouter une marge à certains endroits pour le défilement, vous pouvez le faire en préfixant scroll, comme scroll-m-4.

Mise en page multi-colonnes

Tailwind prend désormais en charge les mises en page multi-colonnes/de type journal ! Vous pouvez indiquer un nombre spécifique de colonnes dont vous avez besoin ou simplement le régler sur auto pour que le navigateur décide du nombre de colonnes à utiliser en fonction de la taille.

Couleur d’accentuation et téléchargement de fichiers

Couleur d’accentuation

Vous pouvez désormais personnaliser vos formulaires pour qu’ils correspondent au thème de votre marque et modifier les couleurs d’éléments tels que les cases à cocher et les boutons radio.

image.png

Vous pouvez y parvenir en ajoutant simplement l’élément accent-<color>-<shade> à la balise div/form.

Bouton de téléchargement de fichiers

Vous pouvez également personnaliser les boutons de téléchargement de fichiers pour qu’ils aient l’air beaux comme ceci-

image.png

Vous pouvez ajouter des styles comme vous le faites normalement mais le préfixe file:. Pour obtenir le même bouton que moi, vous pouvez utiliser ceci-

<input type="file" class="file:bg-emerald-200 file:px-4 file:py-2 file:rounded-full file:border-none file:text-emerald-900 file:text-lg file:font-semibold"/>

Soulignements fantaisistes

Vous pouvez désormais modifier la couleur, l’épaisseur et le style de vos soulignements !

image.png

Pour utiliser ces styles, vous devez utiliser decoration-red-600 decoration-wavy ainsi les styles ressembleront à ceci

<p class="underline decoration-red-600 decoration-wavy">I have squigly underline</h1>

Conclusion

L’équipe de TailwindCSS a également publié d’autres choses intéressantes, j’ai juste mis en évidence les choses que j’ai trouvées les plus intéressantes. Pour en savoir plus sur Tailwind, vous pouvez consulter leur site Web .

Newsletter

Ne manquez jamais les nouveaux conseils, tutoriels et autres.

Pas de spam, jamais. Nous ne partagerons jamais votre adresse électronique et vous pouvez vous désabonner à tout moment.