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 !
Il y a aussi 5 gris différents maintenant ! 🤯
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…
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.
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-
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 !
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 .
