Tailwind Flexbox lesson
Space items with gap
gap-* adds space between flex or grid children. It is usually clearer and more reliable than adding margins to every item.
Utilities
| Class | What it does |
|---|---|
gap-4 | Adds the same spacing in both directions. |
gap-x-6 | Adds horizontal spacing only. |
gap-y-2 | Adds vertical spacing only. |
gap-0 | Removes gaps. |
Try it
Use Tailwind gap utility on the parent container to create consistent spacing between its children, instead of adding special margins to individual children.
<div class="flex flex-wrap gap-x-6 gap-y-3">
<a href="#">Guides</a>
<a href="#">Examples</a>
<a href="#">About</a>
</div>