Logo
×

Tailwind CSS Gap

In tailwind CSS, this class accepts multiple values, and all of the properties are covered in class form. It's a replacement for the CSS gap attribute. This class is used to set the spacing between the rows and columns, commonly known as the gutter. As with column-gap and row-gap, they are used separately so that the gap property can be used to specify both a column and a row gap.

Gap

There are 105 classes in all for gap, with the x and y axes listed separately.

  • gap-0
  • gap-x-0
  • gap-y-0
  • gap-0.5
  • gap-x-0.5
  • gap-y-0.5
  • gap-1
  • gap-x-1
  • gap-y-1
  • gap-1.5
  • gap-x-1.5
  • gap-y-1.5
  • gap-2
  • gap-x-2
  • gap-y-2
  • gap-2.5
  • gap-x-2.5
  • gap-y-2.5
  • gap-3
  • gap-x-3 
  • gap-y-3 
  • gap-3.5 
  • gap-x-3.5
  • gap-y-3.5
  • gap-4 
  • gap-x-4
  • gap-y-4
  • gap-5
  • gap-x-5
  • gap-y-5
  • gap-6 
  • gap-x-6
  • gap-y-6
  • gap-7
  • gap-x-7
  • gap-y-7
  • gap-8 
  • gap-x-8
  • gap-y-8 
  • gap-9 
  • gap-x-9
  • gap-y-9 
  • gap-10 
  • gap-x-10 
  • gap-y-10 
  • gap-11
  • gap-x-11 
  • gap-y-11 
  • gap-12 
  • gap-x-12 
  • gap-y-12 
  • gap-14 
  • gap-x-14 
  • gap-y-14 
  • gap-16 
  • gap-x-16 
  • gap-y-16 
  • gap-20 
  • gap-x-20 
  • gap-y-20 
  • gap-24 
  • gap-x-24 
  • gap-y-24 
  • gap-28 
  • gap-x-28 
  • gap-y-28 
  • gap-32 
  • gap-x-32 
  • gap-y-32 
  • gap-36 
  • gap-x-36 
  • gap-y-36 
  • gap-40 
  • gap-x-40 
  • gap-y-40 
  • gap-44 
  • gap-x-44
  • gap-y-44
  • gap-48 
  • gap-x-48 
  • gap-y-48 
  • gap-52 
  • gap-x-52
  • gap-y-52
  • gap-56 
  • gap-x-56
  • gap-y-56
  • gap-60 
  • gap-x-60
  • gap-y-60
  • gap-64 
  • gap-x-64
  • gap-y-64
  • gap-72 
  • gap-x-72
  • gap-y-72
  • gap-80 
  • gap-x-80
  • gap-y-80
  • gap-96 
  • gap-x-96
  • gap-y-96
  • gap-px 
  • gap-x-px
  • gap-y-px

gap-number: Using simply the gap class and not mentioning the axis will retain the in both axes according to the number mentioned:

Syntax

<element class="gap-number"> Contents... </element>

Parameter: As noted above and as described below, this class accepts only one value:

number: The element's gap size is stored here.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Tailwind gap Class</title>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
          rel="stylesheet">
</head>
<body class="text-center">
    <h1 class="text-red-600 text-5xl font-bold">
        Tutorial and Example
    </h1>
    <b>Tailwind CSS gap Class</b>
    <div id="main" class="grid grid-rows-2
                          grid-flow-col gap-5">
        <div class="bg-red-500 rounded-lg m-4 h-12">1</div>
        <div class="bg-red-500 rounded-lg m-4 h-12">2</div>
        <div class="bg-red-500 rounded-lg m-4 h-12">3</div>
        <div class="bg-red-500 rounded-lg m-4 h-12">4</div>
        <div class="bg-red-500 rounded-lg m-4 h-12">5</div>
        <div class="bg-red-500 rounded-lg m-4 h-12">6</div>
    </div>
</body>
</html>

Output:

Tailwind CSS Gap

gap-x-number: The gap-x class maintains the x-axis gap according to the specified number:

Syntax

<element class="gap-x-number"> Contents... </element>

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Tailwind gap-x-number Class</title>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
          rel="stylesheet">
</head>
<body class="text-center">
    <h1 class="text-red-600 text-5xl font-bold">
        Tutorial and Example
    </h1>
    <b>gap-x-number Class - Tailwind CSS </b>
    <div id="main" class="grid grid-rows-2
                          grid-flow-col gap-x-5">
        <div class="bg-red-500 rounded-lg m-4 h-12">1</div>
        <div class="bg-red-500 rounded-lg m-4 h-12">2</div>
        <div class="bg-red-500 rounded-lg m-4 h-12">3</div>
        <div class="bg-red-500 rounded-lg m-4 h-12">4</div>
        <div class="bg-red-500 rounded-lg m-4 h-12">5</div>
        <div class="bg-red-500 rounded-lg m-4 h-12">6</div>
    </div>
</body>
</html>

Output:

Tailwind CSS Gap

gap-y-number: The gap-y class maintains the x-axis gap according to the specified number:

Syntax

<element class="gap-y-number"> Contents... </element>

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Tailwind gap-y-number Class</title>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
          rel="stylesheet">
</head>
<body class="text-center">
    <h1 class="text-red-600 text-5xl font-bold">
        Tutorial and Example
    </h1>
    <b>gap-y-number Class - Tailwind CSS </b>
    <div id="main" class="grid grid-rows-2
                          grid-flow-col gap-y-5">
        <div class="bg-red-500 rounded-lg m-4 h-12">1</div>
        <div class="bg-red-500 rounded-lg m-4 h-12">2</div>
        <div class="bg-red-500 rounded-lg m-4 h-12">3</div>
        <div class="bg-red-500 rounded-lg m-4 h-12">4</div>
        <div class="bg-red-500 rounded-lg m-4 h-12">5</div>
        <div class="bg-red-500 rounded-lg m-4 h-12">6</div>
    </div>
</body>
</html>

Output:

Tailwind CSS Gap

Related Topics

Tailwind CSS Height

This class accepts a large number of values, and all of the properties are covered in class form. It's a replacement for the CSS height property. This class is used...

4 minutes read.

Tailwind CSS Flex Shrink

CSS flexbox is an important element for frontend development. There are two flex-shrink options in Tailwind CSS, and all properties are covered in class form. For quick front-end development, it's...

3 minutes read.

Tailwind CSS Installation

Here, we will discuss the installation method of Tailwind CSS using two strategies discussed as follows: Strategy 1: Install Tailwind through npm Step 1: npm init - y Step 2: npm install tailwindcss Step...

2 minutes read.

Tailwind CSS Clear

This class acknowledges more than one worth in tailwind CSS. Every one of the properties is canvassed as in class form. It is an option in contrast to the CSS...

5 minutes read.

Tailwind CSS Align Self

This class accepts a wide range of values. It's a replacement for the CSS Align Self attribute. This class is used to control how a flex or grid item is...

4 minutes read.

Tailwind CSS Space Between

In tailwind CSS, this class accepts a large number of values, and all of the properties are covered in class form. It's a replacement for the CSS Space Between property....

4 minutes read.

Tailwind CSS Align Items

In tailwind CSS, this class accepts a wide range of values. It's a replacement for the CSS Align Items attribute. This class is used to align things within the flexible...

5 minutes read.

Tailwind CSS Place Content

This class accepts a wide range of values. It's a replacement for the CSS Place Content property. This class is used to manage how information is justified while still being...

5 minutes read.

Tailwind CSS Grid Auto Flow

In tailwind CSS, this class accepts multiple values, and all of the properties are covered in class form. It is a CSS alternative. The grid-auto-flow property is used in Tailwind...

4 minutes read.

Tailwind CSS Object Fit

It acknowledges more than one value in tailwind CSS. Every one of its properties is covered as in class form. It is the option in contrast to the CSS object-fit...

4 minutes read.

Tailwind CSS Stroke

This class accepts a lot of value, and all of the properties are covered in class form. It's the stroke class that goes on top of the SVG element. Stroke...

2 minutes read.

Tailwind CSS Box Shadow

The Tailwind CSS Box Shadow class accepts a lot of value, and all of the properties are covered in class form. We may control the box-shadow of an element by...

2 minutes read.

Tailwind CSS Flex Wrap

CSS flexbox is an important component for frontend development. It is a front-end development alternative to the CSS flex-wrap Property. Note: You must include the flex class in your element before...

4 minutes read.

Tailwind CSS Min-Width

In tailwind CSS, this class accepts a large number of values, and all of the properties are covered in class form. It's a replacement for the CSS min-width property. This...

1 minute read.

Tailwind CSS Opacity

This class accepts a lot of value, and all of the properties are covered in class form. We can change the opacity of any element by using this class. The...

1 minute read.

Tailwind CSS Place Items

This class accepts a wide range of values. It's a replacement for the CSS Place Items property. This class is used to manage how things are justified while still being...

4 minutes read.

Tailwind CSS Position

The position class acknowledges more than one value in tailwind CSS. It is an option in contrast to the CSS Position property. This class is utilized for controlling how an...

5 minutes read.

Tailwind CSS Min-Height

In tailwind CSS, this class accepts a large number of values, and all of the properties are covered in class form. It's a replacement for the CSS Min-Height Property. It...

2 minutes read.

Tailwind CSS Margin

The margin class accepts a large number of values, and all of the properties are covered in the same way they are in the class form. It's a replacement for...

6 minutes read.

Tailwind CSS Padding

This class accepts a large number of values, and all of the properties are covered in class form. It's a replacement for the CSS Padding Property. This class is used...

4 minutes read.