Space (Spacing)
Tailwind CSS 🟢 JuniorDefinition
Utilitaires space-x et space-y qui ajoutent un espacement entre les enfants d'un conteneur via des marges automatiques. Alternative a gap pour les anciens navigateurs.
Analogie
Des separateurs automatiques entre les livres sur une etagere.
Exemple de code
<div class="space-y-4">
<p>Premier</p>
<p>Deuxieme (margin-top: 1rem auto)</p>
<p>Troisieme</p>
</div>
Cas d'usage
Espacer uniformement les enfants d'une liste verticale ou horizontale.
Anti-pattern
Utiliser space-* quand gap est disponible (gap est plus fiable avec flex/grid).