Tutoriel Vidéo CSS tailwindcss

Devenir premium et y accéder de suite

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 composannt / 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>