Tailwind CSS Space Between

The space-between utility class in Tailwind CSS creates evenly distributed space between child elements in a container.

Syntax

<div class="flex justify-between">
  <div>First item</div>
  <div>Second item</div>
  <div>Third item</div>
</div>

Example

Here is an example of how to use the space-between utility class in Tailwind CSS:

<div class="flex justify-between">
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Button 1
  </button>
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Button 2
  </button>
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Button 3
  </button>
</div>

Output

Explanation

The example code creates a container using the flex utility class. The justify-between utility class is added to the container to distribute space evenly between the child elements. Three buttons are added inside the container as child elements.

Use

The space-between utility class is used to add even space distribution between child elements in a container. It is useful for creating navigation bars, button groups, and other similar designs where space distribution is important.

Important Points

• The space-between utility class only works with the display: flex property.
• The justify-between utility class is used specifically for horizontal space distribution.
• If there are only two elements inside a container, using justify-between will place them at either end of the container with no space between them. To add space between them, use justify-center.

Summary

The space-between utility class in Tailwind CSS is used to add even space distribution between child elements in a container. It is useful for creating navigation bars, button groups, and other similar designs where space distribution is important. It works only with display: flex property and justify-between is used specifically for horizontal space distribution.