Tailwind, une popularité incontestée
Tailwind CSS est devenu incontournable dans le monde du développement front-end. La toute fraîche version 4 continue de séduire avec encore plus de solutions adaptées aux besoins des développeurs. Beaucoup déclarent leur amour pour ce framework, et il sera difficile de les faire changer d'avis ! Bravo au futur framework CSS qui réussira un jour à les rendre infidèles !
Les sites proposant des composants Tailwind sont nombreux et offrent des snippets de code gratuits ou accessibles via un abonnement très raisonnable. Parmi eux, on peut citer :
Tailwind UI : La référence officielle pour des composants premium.
Flowbite : Composants interactifs avec des options gratuites.
DaisyUI : Un ensemble de composants gratuits enrichissant Tailwind.
Tailscan : Un inspecteur visuel Tailwind pour ajuster votre CSS.
Tailgrids : Composants payants et gratuits de haute qualité.
Personnellement, mon abonnement à Tailwind UI me fait gagner tellement de temps qu'il m'est difficile de m'en passer !
Le besoin d'animations bien dosées
Les clients, eux, attendent souvent un effet "waouh". Les animations ne doivent pas être purement décoratives, mais bien pensées et intégrées intelligemment. On en reparlera dans un futur article avec GSAP pour des animations avancées.
En attendant, pour des animations fluides et bien gérées en CSS ou Tailwind, EasingWizard est une solution accessible et sans abonnement. Il vous évite d'empiler plusieurs bibliothèques d'animations. Tout est prêt : il suffit d'ajouter les bons ingrédients dans la marmite.
Déclencher une animation au bon moment avec Alpine.js
Le problème, c’est que par défaut, les animations Tailwind se déclenchent dès le chargement de la page. Si l'animation n'est pas liée à un "hover" (passage de la souris), on veut qu'elle s'exécute uniquement lorsque l'élément entre dans la zone visible du navigateur.
Pour cela, nous allons utiliser un peu de JavaScript.
On pourrait le faire en vanilla JS, mais je vais vous montrer une méthode simple avec Alpine.js, directement dans le div de l'élément grâce à x-data. (il faut le plugin intersect d'alpineJs)
<div x-data="{ visible: false }" x-intersect:enter.once="visible = true" :class="visible ? 'opacity-100 transform scale-100 ease-[cubic-bezier(0.1,_1,_0.9,_0)] duration-700' : 'opacity-0 scale-90'" class="transition-all"> <h2 class="text-2xl font-bold">Hello World</h2> </div>