Aujourd'hui je vous propose de découvrir le framework CSS tailwindcss.
00:00 Découvert à travers un cas concret
18:50 Le système de composant / Utilisation via PostCSS
26:30 Réduire le poid du framework avec PurgeCSS
30:06 Mon avis sur le framework
31:26 L'avis de Romain Lanz
Approche utilitaire
Plutôt que de proposer des classes liées à des composants .card, .tabs, .nav.
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Titre de l'article</h5>
<p class="card-text">
Dessert biscuit fruitcake gingerbread candy powder. Apple pie muffin pie muffin gingerbread chupa chups sweet cheesecake sesame snaps. Gummies
</p>
<a href="#" class="btn btn-primary">En savoir plus</a>
</div>
</div>
Tailwindcss va offrir une série de classes génériques qui peuvent être combinées pour créer tous les éléments qui composent le site.
<div class="bg-white shadow-lg">
<img class="w-full" src="..." alt="Card image cap">
<div class="py-4">
<h5 class="text-2xs font-semibold mb-2">Titre de l'article</h5>
<p class="text-gray-600 mb-4">
Dessert biscuit fruitcake gingerbread candy powder. Apple pie muffin pie muffin gingerbread chupa chups sweet cheesecake sesame snaps. Gummies
</p>
<a href="#" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">En savoir plus</a>
</div>
</div>
