gap

Gap is a fundamental CSS property for grid and flex layouts only. gap-* is just shorthand for gap: *;. It spaces adjacent elements out by the specified length, in either one (gap-x/y-*), or both dimensions (gap-*). Unlike space-x/y-* it does NOT use element-specific margins for individual elements, but rather each element's position is computed by the browser based on the flex layout specification.

Example:

<div class="flex gap-x-4">
    <!-- No margin is being applied to these elements, their spacing is computed by the browser via flex layout. -->
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

space

space-x/y-* on the other hand is an engineered use of margin. It adds margin to all but the last child of the parent, and can be used to space children in both block and flex layouts.

Example:

<div class="space-x-4">
    <span>1</span> <!-- Margin Right Applied -->
    <span>2</span> <!-- Margin Right Applied -->
    <span>3</span> <!-- Last Element: No Margin Applied -->
</div>

Conclusion

space is likely most useful when you need consistent spacing between child elements in a block layout, when you need to override spacing on only specific elements, or in the unusual case you want to achieve negative gap/spacing (which is not supported by CSS's gap). In most other cases, I would consider gap to be the preferable option as it is a CSS native feature.