[TailwindCSS] space-x-2

space-x-2 is a Tailwind CSS utility class (predefined small-scale classes) used to add horizontal spacing (gap) between sibling elements(elements that share the same parent element) inside a container.

1. Definition

   • space-x-2 adds horizontal spacing bewteen direct child elements.

   • the 2 refers to a predefined spacing value in Tailwind’s spacing scale, which by default equals 0.5rem (8px).

2. How it works

   • This class only applies spacing between child elements.

   • It uses the margin-left or margin-right property under the hood to create gaps between the items.

3. Example Code

    <div class="flex space-x-2">
      <div class="bg-red-500 h-10 w-10"></div>
      <div class="bg-blue-500 h-10 w-10"></div>
      <div class="bg-green-500 h-10 w-10"></div>
    </div>
   

• The container uses a flex layout.

• The space-x-2 class adds 8px of horizontal spacing between each child (div).

4. Tailwind’s default spacing scale

   • The numbers in space-x-N correspond to Tailwind’s spacing scale. Here’s an overview

💬 I think it is very similar to gap property. it is very useful for adding space between elemenets.

[Tailwind-website-space-x-N](https://tailwindcss.com/docs/space)