Tailwind CSS Gap
The tailwind gap utility class allows you to easily control the spacing between grid or flex container children.
Tailwind Gap
Spacing matters. Whether youβre building UIs in Figma or coding components in React, consistent spacing can make or break the visual rhythm of your interface. The tailwind gap utility class allows you to control this spacing between grid or flex container children.
This guide walks you through everything you need to know about gap in Tailwind CSS β from how it works at the utility level to real-world usage patterns in responsive layouts and components.
How to apply Tailwind Gap
To apply a Tailwind gap between container children, you can use the gap-{size}
utility class, where {size}
represents the desired gap size. The {size}
can be one of the predefined sizes in Tailwind CSS, such as gap-1
, gap-2
, gap-4
, or you can customize the gap size using the spacing scale. Here's an example:
<div class="gap-4"> <div class="bg-indigo-500">Element 1</div> <div class="bg-indigo-500">Element 2</div> <div class="bg-indigo-500">Element 3</div> <div class="bg-indigo-500">Element 4</div> <div class="bg-indigo-500">Element 5</div> <div class="bg-indigo-500">Element 6</div></div>
Preview
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Tailwind Gap with Grids
When using the tailwind gap utility class with grid layouts, the gap will be applied between the grid cells. This allows you to easily create consistent spacing between grid items.
<div class="grid grid-cols-2 gap-4"> <div class="bg-indigo-500">Item 1</div> <div class="bg-indigo-500">Item 2</div> <div class="bg-indigo-500">Item 3</div> <div class="bg-indigo-500">Item 4</div></div>
Preview
item 1
item 2
item 3
item 4
item 5
item 6
In the above example, a gap of size gap-4
is applied between each grid cell, creating a 4-pixel gap between the items.
Tailwind Gap for row and column
Tailwind gap also allows you to change the gaps between rows and/ or columns independenty.
<div class="grid grid-cols-3 gap-x-4 gap-y-8"> <div class="bg-indigo-500">Element 1</div> <div class="bg-indigo-500">Element 2</div> <div class="bg-indigo-500">Element 3</div> <div class="bg-indigo-500">Element 4</div> <div class="bg-indigo-500">Element 5</div> <div class="bg-indigo-500">Element 6</div></div>
Preview
Responsive Tailwind Gap
Tailwind CSS allows you to apply gap responsively at different breakpoints. To use responsive tailwind gap classes, you can append the breakpoint prefix to the gap class. For example, md:gap-4 applies
a gap of size 4 starting from the medium breakpoint and above.
<div class="rounded-t-xl overflow-hidden p-8 text-center bg-indigo-200 text-white"> <div class="grid grid-cols-3 gap-2 md:gap-8"> <div class="rounded-lg p-4 shadow-md bg-indigo-500 font-bold"> Element 1 </div> <div class="rounded-lg p-4 shadow-md bg-indigo-500 font-bold"> Element 2 </div> <div class="rounded-lg p-4 shadow-md bg-indigo-500 font-bold"> Element 3 </div> <div class="rounded-lg p-4 shadow-md bg-indigo-500 font-bold"> Element 4 </div> <div class="rounded-lg p-4 shadow-md bg-indigo-500 font-bold"> Element 5 </div> <div class="rounded-lg p-4 shadow-md bg-indigo-500 font-bold"> Element 6 </div> </div></div>
Preview
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
In the above example, a gap of size gap-2
is applied by default, creating a 2-pixel gap between each child element. However, starting from the medium breakpoint and above (md:gap-4)
, the gap increases to 4 pixels.
π― Arbitrary Values
Need a very specific gap that isnβt in your scale?
<div class="rounded-t-xl overflow-hidden p-8 text-center bg-indigo-200 text-white"> <div class="grid grid-cols-2 gap-[3.25rem]"> <div class="rounded-lg p-4 shadow-md bg-indigo-500 font-bold"> Element 1 </div> <div class="rounded-lg p-4 shadow-md bg-indigo-500 font-bold"> Element 2 </div> <div class="rounded-lg p-4 shadow-md bg-indigo-500 font-bold"> Element 3 </div> <div class="rounded-lg p-4 shadow-md bg-indigo-500 font-bold"> Element 4 </div> <div class="rounded-lg p-4 shadow-md bg-indigo-500 font-bold"> Element 5 </div> <div class="rounded-lg p-4 shadow-md bg-indigo-500 font-bold"> Element 6 </div> </div></div>
Preview
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Arbitrary values are a power feature β great for matching pixel-perfect designs.
βοΈ Customizing in tailwind.config.js
You can extend the spacing scale to define your own gap sizes:
// tailwind.config.jsmodule.exports = { theme: { extend: { spacing: { 72: "18rem", 84: "21rem", "custom-gap": "7.25rem", }, }, },};
<div class="rounded-t-xl overflow-hidden p-8 text-center bg-indigo-200 text-white"> <div class="flex justify-center items-center gap-custom-gap"> <div class="rounded-lg p-4 shadow-md bg-indigo-500 font-bold">A</div> <div class="rounded-lg p-4 shadow-md bg-indigo-500 font-bold">B</div> <div class="rounded-lg p-4 shadow-md bg-indigo-500 font-bold">C</div> </div></div>
Preview
This ensures consistent spacing across your design system.
π¦ Real UI Examples
β Example 1: Testimonial Card Grid
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <Card /> <Card /> <Card /></div>
Preview
Very easy to use for development
"This is a very good tool to use to intergrate your web flow"
Jamey Popes
DeveloperGreat place to for your design
"Designing with figma component that is easy to turn into tailwind utility components is very convient"
Sarah Bobs
Lead designerStartup has never been more easy to start with this tool
"been able to have your landing page of your startup withing minutes is really great."
Phil Cobly
Founder DollyCopA responsive 3-column layout with gap-6 between cards. Works great for dashboards, galleries, or pricing sections.
β Example 2: Button Group
<div class="rounded-t-xl overflow-hidden p-8 bg-indigo-50"> <div class="flex justify-between items-center gap-4 text-white font-bold"> <button class="bg-indigo-500 shadow p-2 rounded w-full">Cancel</button> <button class="bg-indigo-500 shadow p-2 rounded w-full">Submit</button> </div></div>
Preview
Spacing buttons horizontally using gap
is cleaner than using mr-*
or ml-*
repeatedly.
β Example 3: Form Layout
<div class="rounded-t-xl overflow-hidden p-8 bg-indigo-50"> <div class="grid grid-col-1 bg-white rounded-md shadow-md gap-y-4 p-6"> <h1 class="text-center font-bold text-2xl m-4">Sign up Form</h1> <label>Full Name</label> <input class="bg-gray-200 w-full p-3 rounded-full border-2 border-gray-300 focus:border-indigo-300" type="text" placeholder="name" /> <label>Email</label> <input class="bg-gray-200 w-full p-3 rounded-full border-2 border-gray-300 focus:border-indigo-300" type="email" placeholder="@gmail" /> <label>Password</label> <input class="bg-gray-200 w-full p-3 rounded-full border-2 border-gray-300 focus:border-indigo-300" type="Password" placeholder="β’β’β’β’β’β’β’β’" /> <label>Password Confirm</label> <input class="bg-gray-200 w-full p-3 rounded-full border-2 border-gray-300 focus:border-indigo-300" type="password" placeholder="β’β’β’β’β’β’β’β’" /> <div class="flex gap-2"> <input type="checkbox" /> <h3>Remember me</h3> </div> <button class="w-full bg-indigo-500 rounded-md p-2 text-white font-bold"> Sign Up </button> <p> Already have account? <a href="#login" class=" text-indigo-500 font-semibold">Login</a> </p> </div></div>
Preview
Vertical gaps make form fields easier to scan and complete.
β Best Practices
-
Prefer
gap
over margins when spacing between siblings -
Use
gap-x / gap-y
for finer control in grid systems -
Combine with
transition-*
for smooth visual layout shifts -
Avoid applying
gap
to elements that donβt usegrid
orflex β
it wonβt work
βΏ Accessibility Tips
-
gap doesnβt affect focus styles or tabbing order.
-
When using
hover:gap-*
, ensure itβs not the only visual indicator β donβt rely on spacing alone for hover feedback. -
Ensure text spacing is accessible, if gap is used for inline elements like buttons or tabs.
Tailwind Gap Class Table
Class | Properties |
---|---|
gap-0 | gap: 0px; |
gap-x-0 | column-gap: 0px; |
gap-y-0 | row-gap: 0px; |
gap-0.5 | gap: 0.125rem; |
gap-x-0.5 | column-gap: 0.125rem; |
gap-y-0.5 | row-gap: 0.125rem; |
gap-1 | gap: 0.25rem; |
gap-x-1 | column-gap: 0.25rem; |
gap-y-1 | row-gap: 0.25rem; |
gap-1.5 | gap: 0.375rem; |
gap-x-1.5 | column-gap: 0.375rem; |
gap-y-1.5 | row-gap: 0.375rem; |
gap-2 | gap: 0.5rem; |
gap-x-2 | column-gap: 0.5rem; |
gap-y-2 | row-gap: 0.5rem; |
gap-2.5 | gap: 0.625rem; |
gap-x-2.5 | column-gap: 0.625rem; |
gap-y-2.5 | row-gap: 0.625rem; |
gap-3 | gap: 0.75rem; |
gap-x-3 | column-gap: 0.75rem; |
gap-y-3 | row-gap: 0.75rem; |
gap-3.5 | gap: 0.875rem; |
gap-x-3.5 | column-gap: 0.875rem; |
gap-y-3.5 | row-gap: 0.875rem; |
gap-4 | gap: 1rem; |
gap-x-4 | column-gap: 1rem; |
gap-y-4 | row-gap: 1rem; |
gap-5 | gap: 1.25rem; |
gap-x-5 | column-gap: 1.25rem; |
gap-y-5 | row-gap: 1.25rem; |
gap-6 | gap: 1.5rem; |
gap-x-6 | column-gap: 1.5rem; |
gap-y-6 | row-gap: 1.5rem; |
gap-7 | gap: 1.75rem; |
gap-x-7 | column-gap: 1.75rem; |
gap-y-7 | row-gap: 1.75rem; |
gap-8 | gap: 2rem; |
gap-x-8 | column-gap: 2rem; |
gap-y-8 | row-gap: 2rem; |
gap-9 | gap: 2.25rem; |
gap-x-9 | column-gap: 2.25rem; |
gap-y-9 | row-gap: 2.25rem; |
gap-10 | gap: 2.5rem; |
gap-x-10 | column-gap: 2.5rem; |
gap-y-10 | row-gap: 2.5rem; |
gap-11 | gap: 2.75rem; |
gap-x-11 | column-gap: 2.75rem; |
gap-y-11 | row-gap: 2.75rem; |
gap-12 | gap: 3rem; |
gap-x-12 | column-gap: 3rem; |
gap-y-12 | row-gap: 3rem; |
gap-14 | gap: 3.5rem; |
gap-x-14 | column-gap: 3.5rem; |
gap-y-14 | row-gap: 3.5rem; |
gap-16 | gap: 4rem; |
gap-x-16 | column-gap: 4rem; |
gap-y-16 | row-gap: 4rem; |
gap-20 | gap: 5rem; |
gap-x-20 | column-gap: 5rem; |
gap-y-20 | row-gap: 5rem; |
gap-24 | gap: 6rem; |
gap-x-24 | column-gap: 6rem; |
gap-y-24 | row-gap: 6rem; |
gap-28 | gap: 7rem; |
gap-x-28 | column-gap: 7rem; |
gap-y-28 | row-gap: 7rem; |
gap-32 | gap: 8rem; |
gap-x-32 | column-gap: 8rem; |
gap-y-32 | row-gap: 8rem; |
gap-36 | gap: 9rem; |
gap-x-36 | column-gap: 9rem; |
gap-y-36 | row-gap: 9rem; |
gap-40 | gap: 10rem; |
gap-x-40 | column-gap: 10rem; |
gap-y-40 | row-gap: 10rem; |
gap-44 | gap: 11rem; |
gap-x-44 | column-gap: 11rem; |
gap-y-44 | row-gap: 11rem; |
gap-48 | gap: 12rem; |
gap-x-48 | column-gap: 12rem; |
gap-y-48 | row-gap: 12rem; |
gap-52 | gap: 13rem; |
gap-x-52 | column-gap: 13rem; |
gap-y-52 | row-gap: 13rem; |
gap-56 | gap: 14rem; |
gap-x-56 | column-gap: 14rem; |
gap-y-56 | row-gap: 14rem; |
gap-60 | gap: 15rem; |
gap-x-60 | column-gap: 15rem; |
gap-y-60 | row-gap: 15rem; |
gap-64 | gap: 16rem; |
gap-x-64 | column-gap: 16rem; |
gap-y-64 | row-gap: 16rem; |
gap-72 | gap: 18rem; |
gap-x-72 | column-gap: 18rem; |
gap-y-72 | row-gap: 18rem; |
gap-80 | gap: 20rem; |
gap-x-80 | column-gap: 20rem; |
gap-y-80 | row-gap: 20rem; |
gap-96 | gap: 24rem; |
gap-x-96 | column-gap: 24rem; |
gap-y-96 | row-gap: 24rem; |
gap-px | gap: 1px; |
gap-x-px | column-gap: 1px; |
gap-y-px | row-gap: 1px; |
β¨π Ready to Keep Going?
Windframe Tailwind blocks
Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs
Start building stunning tailwind UIs!Β
