Tailwind CSS Gap

The Tailwind CSS Gap class is a spacing utility that adds gap between elements in a grid or flex layout. It is a shorthand for adding both the margin and padding properties to create visual gaps.

Syntax

To add gap between elements, use the following syntax:

<div class="gap-{size}"></div>

Here, {size} refers to the size of the gap you want to create. {size} can be one of the predefined values in the Tailwind CSS library or you can add your own sizes in the theme.gap section of your Tailwind configuration file.

Example

For example, to add a gap of 4 to a flex container, use the gap-4 class:

<div class="flex gap-4">
  <div class="bg-gray-200">Box 1</div>
  <div class="bg-gray-300">Box 2</div>
  <div class="bg-gray-400">Box 3</div>
</div>

Output

The above example will create a flex container with a gap of 1rem between each child element.

Explanation

The gap utility adds both margin and padding to create a visual gap between elements. It is a shorthand for using both the gap-margin and gap-padding utilities.

Use

The gap utility is commonly used in grid and flex layouts to add spacing between elements without the need for custom CSS. It is particularly useful for responsive designs where the spacing needs to change dynamically based on the viewport size.

Important Points

• The gap utility can only be used on a parent grid or flex container.
• It is a shorthand for using both gap-margin and gap-padding utilities.
• {size} can be one of the predefined sizes in the Tailwind CSS library or a custom size defined in the configuration file.

Summary

The Tailwind CSS gap utility is a shorthand for adding both margin and padding properties to create visual gaps between elements. It is commonly used in responsive grid and flex layouts, and can be customized with predefined or custom sizes.