From a552eb185b8ca0daa3f6bbcd0193d4df7b973d73 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Tue, 24 Dec 2019 20:14:00 -0500
Subject: [PATCH] Add gap-* utilities, remove default values for col-gap and
 row-gap

---
 .../fixtures/tailwind-output-important.css    | 1140 ++++++-----------
 __tests__/fixtures/tailwind-output.css        | 1140 ++++++-----------
 src/corePlugins.js                            |    2 +
 src/plugins/gridGap.js                        |    5 +
 stubs/defaultConfig.stub.js                   |    6 +-
 5 files changed, 771 insertions(+), 1522 deletions(-)
 create mode 100644 src/plugins/gridGap.js

diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index e84815540..a42e78304 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -8366,6 +8366,82 @@ video {
   z-index: auto !important;
 }
 
+.gap-0 {
+  grid-gap: 0 !important;
+}
+
+.gap-1 {
+  grid-gap: 0.25rem !important;
+}
+
+.gap-2 {
+  grid-gap: 0.5rem !important;
+}
+
+.gap-3 {
+  grid-gap: 0.75rem !important;
+}
+
+.gap-4 {
+  grid-gap: 1rem !important;
+}
+
+.gap-5 {
+  grid-gap: 1.25rem !important;
+}
+
+.gap-6 {
+  grid-gap: 1.5rem !important;
+}
+
+.gap-8 {
+  grid-gap: 2rem !important;
+}
+
+.gap-10 {
+  grid-gap: 2.5rem !important;
+}
+
+.gap-12 {
+  grid-gap: 3rem !important;
+}
+
+.gap-16 {
+  grid-gap: 4rem !important;
+}
+
+.gap-20 {
+  grid-gap: 5rem !important;
+}
+
+.gap-24 {
+  grid-gap: 6rem !important;
+}
+
+.gap-32 {
+  grid-gap: 8rem !important;
+}
+
+.gap-40 {
+  grid-gap: 10rem !important;
+}
+
+.gap-48 {
+  grid-gap: 12rem !important;
+}
+
+.gap-56 {
+  grid-gap: 14rem !important;
+}
+
+.gap-64 {
+  grid-gap: 16rem !important;
+}
+
+.gap-px {
+  grid-gap: 1px !important;
+}
+
 .grid-cols-1 {
   grid-template-columns: repeat(1, 1fr) !important;
 }
@@ -8414,82 +8490,6 @@ video {
   grid-template-columns: repeat(12, 1fr) !important;
 }
 
-.col-gap-0 {
-  grid-column-gap: 0 !important;
-}
-
-.col-gap-1 {
-  grid-column-gap: 0.25rem !important;
-}
-
-.col-gap-2 {
-  grid-column-gap: 0.5rem !important;
-}
-
-.col-gap-3 {
-  grid-column-gap: 0.75rem !important;
-}
-
-.col-gap-4 {
-  grid-column-gap: 1rem !important;
-}
-
-.col-gap-5 {
-  grid-column-gap: 1.25rem !important;
-}
-
-.col-gap-6 {
-  grid-column-gap: 1.5rem !important;
-}
-
-.col-gap-8 {
-  grid-column-gap: 2rem !important;
-}
-
-.col-gap-10 {
-  grid-column-gap: 2.5rem !important;
-}
-
-.col-gap-12 {
-  grid-column-gap: 3rem !important;
-}
-
-.col-gap-16 {
-  grid-column-gap: 4rem !important;
-}
-
-.col-gap-20 {
-  grid-column-gap: 5rem !important;
-}
-
-.col-gap-24 {
-  grid-column-gap: 6rem !important;
-}
-
-.col-gap-32 {
-  grid-column-gap: 8rem !important;
-}
-
-.col-gap-40 {
-  grid-column-gap: 10rem !important;
-}
-
-.col-gap-48 {
-  grid-column-gap: 12rem !important;
-}
-
-.col-gap-56 {
-  grid-column-gap: 14rem !important;
-}
-
-.col-gap-64 {
-  grid-column-gap: 16rem !important;
-}
-
-.col-gap-px {
-  grid-column-gap: 1px !important;
-}
-
 .col-span-1 {
   grid-column: span 1 / span 1 !important;
 }
@@ -8642,82 +8642,6 @@ video {
   grid-column-end: 13 !important;
 }
 
-.row-gap-0 {
-  grid-row-gap: 0 !important;
-}
-
-.row-gap-1 {
-  grid-row-gap: 0.25rem !important;
-}
-
-.row-gap-2 {
-  grid-row-gap: 0.5rem !important;
-}
-
-.row-gap-3 {
-  grid-row-gap: 0.75rem !important;
-}
-
-.row-gap-4 {
-  grid-row-gap: 1rem !important;
-}
-
-.row-gap-5 {
-  grid-row-gap: 1.25rem !important;
-}
-
-.row-gap-6 {
-  grid-row-gap: 1.5rem !important;
-}
-
-.row-gap-8 {
-  grid-row-gap: 2rem !important;
-}
-
-.row-gap-10 {
-  grid-row-gap: 2.5rem !important;
-}
-
-.row-gap-12 {
-  grid-row-gap: 3rem !important;
-}
-
-.row-gap-16 {
-  grid-row-gap: 4rem !important;
-}
-
-.row-gap-20 {
-  grid-row-gap: 5rem !important;
-}
-
-.row-gap-24 {
-  grid-row-gap: 6rem !important;
-}
-
-.row-gap-32 {
-  grid-row-gap: 8rem !important;
-}
-
-.row-gap-40 {
-  grid-row-gap: 10rem !important;
-}
-
-.row-gap-48 {
-  grid-row-gap: 12rem !important;
-}
-
-.row-gap-56 {
-  grid-row-gap: 14rem !important;
-}
-
-.row-gap-64 {
-  grid-row-gap: 16rem !important;
-}
-
-.row-gap-px {
-  grid-row-gap: 1px !important;
-}
-
 .transform {
   --transform-scale-x: 1 !important;
   --transform-scale-y: 1 !important;
@@ -17992,6 +17916,82 @@ video {
     z-index: auto !important;
   }
 
+  .sm\:gap-0 {
+    grid-gap: 0 !important;
+  }
+
+  .sm\:gap-1 {
+    grid-gap: 0.25rem !important;
+  }
+
+  .sm\:gap-2 {
+    grid-gap: 0.5rem !important;
+  }
+
+  .sm\:gap-3 {
+    grid-gap: 0.75rem !important;
+  }
+
+  .sm\:gap-4 {
+    grid-gap: 1rem !important;
+  }
+
+  .sm\:gap-5 {
+    grid-gap: 1.25rem !important;
+  }
+
+  .sm\:gap-6 {
+    grid-gap: 1.5rem !important;
+  }
+
+  .sm\:gap-8 {
+    grid-gap: 2rem !important;
+  }
+
+  .sm\:gap-10 {
+    grid-gap: 2.5rem !important;
+  }
+
+  .sm\:gap-12 {
+    grid-gap: 3rem !important;
+  }
+
+  .sm\:gap-16 {
+    grid-gap: 4rem !important;
+  }
+
+  .sm\:gap-20 {
+    grid-gap: 5rem !important;
+  }
+
+  .sm\:gap-24 {
+    grid-gap: 6rem !important;
+  }
+
+  .sm\:gap-32 {
+    grid-gap: 8rem !important;
+  }
+
+  .sm\:gap-40 {
+    grid-gap: 10rem !important;
+  }
+
+  .sm\:gap-48 {
+    grid-gap: 12rem !important;
+  }
+
+  .sm\:gap-56 {
+    grid-gap: 14rem !important;
+  }
+
+  .sm\:gap-64 {
+    grid-gap: 16rem !important;
+  }
+
+  .sm\:gap-px {
+    grid-gap: 1px !important;
+  }
+
   .sm\:grid-cols-1 {
     grid-template-columns: repeat(1, 1fr) !important;
   }
@@ -18040,82 +18040,6 @@ video {
     grid-template-columns: repeat(12, 1fr) !important;
   }
 
-  .sm\:col-gap-0 {
-    grid-column-gap: 0 !important;
-  }
-
-  .sm\:col-gap-1 {
-    grid-column-gap: 0.25rem !important;
-  }
-
-  .sm\:col-gap-2 {
-    grid-column-gap: 0.5rem !important;
-  }
-
-  .sm\:col-gap-3 {
-    grid-column-gap: 0.75rem !important;
-  }
-
-  .sm\:col-gap-4 {
-    grid-column-gap: 1rem !important;
-  }
-
-  .sm\:col-gap-5 {
-    grid-column-gap: 1.25rem !important;
-  }
-
-  .sm\:col-gap-6 {
-    grid-column-gap: 1.5rem !important;
-  }
-
-  .sm\:col-gap-8 {
-    grid-column-gap: 2rem !important;
-  }
-
-  .sm\:col-gap-10 {
-    grid-column-gap: 2.5rem !important;
-  }
-
-  .sm\:col-gap-12 {
-    grid-column-gap: 3rem !important;
-  }
-
-  .sm\:col-gap-16 {
-    grid-column-gap: 4rem !important;
-  }
-
-  .sm\:col-gap-20 {
-    grid-column-gap: 5rem !important;
-  }
-
-  .sm\:col-gap-24 {
-    grid-column-gap: 6rem !important;
-  }
-
-  .sm\:col-gap-32 {
-    grid-column-gap: 8rem !important;
-  }
-
-  .sm\:col-gap-40 {
-    grid-column-gap: 10rem !important;
-  }
-
-  .sm\:col-gap-48 {
-    grid-column-gap: 12rem !important;
-  }
-
-  .sm\:col-gap-56 {
-    grid-column-gap: 14rem !important;
-  }
-
-  .sm\:col-gap-64 {
-    grid-column-gap: 16rem !important;
-  }
-
-  .sm\:col-gap-px {
-    grid-column-gap: 1px !important;
-  }
-
   .sm\:col-span-1 {
     grid-column: span 1 / span 1 !important;
   }
@@ -18268,82 +18192,6 @@ video {
     grid-column-end: 13 !important;
   }
 
-  .sm\:row-gap-0 {
-    grid-row-gap: 0 !important;
-  }
-
-  .sm\:row-gap-1 {
-    grid-row-gap: 0.25rem !important;
-  }
-
-  .sm\:row-gap-2 {
-    grid-row-gap: 0.5rem !important;
-  }
-
-  .sm\:row-gap-3 {
-    grid-row-gap: 0.75rem !important;
-  }
-
-  .sm\:row-gap-4 {
-    grid-row-gap: 1rem !important;
-  }
-
-  .sm\:row-gap-5 {
-    grid-row-gap: 1.25rem !important;
-  }
-
-  .sm\:row-gap-6 {
-    grid-row-gap: 1.5rem !important;
-  }
-
-  .sm\:row-gap-8 {
-    grid-row-gap: 2rem !important;
-  }
-
-  .sm\:row-gap-10 {
-    grid-row-gap: 2.5rem !important;
-  }
-
-  .sm\:row-gap-12 {
-    grid-row-gap: 3rem !important;
-  }
-
-  .sm\:row-gap-16 {
-    grid-row-gap: 4rem !important;
-  }
-
-  .sm\:row-gap-20 {
-    grid-row-gap: 5rem !important;
-  }
-
-  .sm\:row-gap-24 {
-    grid-row-gap: 6rem !important;
-  }
-
-  .sm\:row-gap-32 {
-    grid-row-gap: 8rem !important;
-  }
-
-  .sm\:row-gap-40 {
-    grid-row-gap: 10rem !important;
-  }
-
-  .sm\:row-gap-48 {
-    grid-row-gap: 12rem !important;
-  }
-
-  .sm\:row-gap-56 {
-    grid-row-gap: 14rem !important;
-  }
-
-  .sm\:row-gap-64 {
-    grid-row-gap: 16rem !important;
-  }
-
-  .sm\:row-gap-px {
-    grid-row-gap: 1px !important;
-  }
-
   .sm\:transform {
     --transform-scale-x: 1 !important;
     --transform-scale-y: 1 !important;
@@ -27619,6 +27467,82 @@ video {
     z-index: auto !important;
   }
 
+  .md\:gap-0 {
+    grid-gap: 0 !important;
+  }
+
+  .md\:gap-1 {
+    grid-gap: 0.25rem !important;
+  }
+
+  .md\:gap-2 {
+    grid-gap: 0.5rem !important;
+  }
+
+  .md\:gap-3 {
+    grid-gap: 0.75rem !important;
+  }
+
+  .md\:gap-4 {
+    grid-gap: 1rem !important;
+  }
+
+  .md\:gap-5 {
+    grid-gap: 1.25rem !important;
+  }
+
+  .md\:gap-6 {
+    grid-gap: 1.5rem !important;
+  }
+
+  .md\:gap-8 {
+    grid-gap: 2rem !important;
+  }
+
+  .md\:gap-10 {
+    grid-gap: 2.5rem !important;
+  }
+
+  .md\:gap-12 {
+    grid-gap: 3rem !important;
+  }
+
+  .md\:gap-16 {
+    grid-gap: 4rem !important;
+  }
+
+  .md\:gap-20 {
+    grid-gap: 5rem !important;
+  }
+
+  .md\:gap-24 {
+    grid-gap: 6rem !important;
+  }
+
+  .md\:gap-32 {
+    grid-gap: 8rem !important;
+  }
+
+  .md\:gap-40 {
+    grid-gap: 10rem !important;
+  }
+
+  .md\:gap-48 {
+    grid-gap: 12rem !important;
+  }
+
+  .md\:gap-56 {
+    grid-gap: 14rem !important;
+  }
+
+  .md\:gap-64 {
+    grid-gap: 16rem !important;
+  }
+
+  .md\:gap-px {
+    grid-gap: 1px !important;
+  }
+
   .md\:grid-cols-1 {
     grid-template-columns: repeat(1, 1fr) !important;
   }
@@ -27667,82 +27591,6 @@ video {
     grid-template-columns: repeat(12, 1fr) !important;
   }
 
-  .md\:col-gap-0 {
-    grid-column-gap: 0 !important;
-  }
-
-  .md\:col-gap-1 {
-    grid-column-gap: 0.25rem !important;
-  }
-
-  .md\:col-gap-2 {
-    grid-column-gap: 0.5rem !important;
-  }
-
-  .md\:col-gap-3 {
-    grid-column-gap: 0.75rem !important;
-  }
-
-  .md\:col-gap-4 {
-    grid-column-gap: 1rem !important;
-  }
-
-  .md\:col-gap-5 {
-    grid-column-gap: 1.25rem !important;
-  }
-
-  .md\:col-gap-6 {
-    grid-column-gap: 1.5rem !important;
-  }
-
-  .md\:col-gap-8 {
-    grid-column-gap: 2rem !important;
-  }
-
-  .md\:col-gap-10 {
-    grid-column-gap: 2.5rem !important;
-  }
-
-  .md\:col-gap-12 {
-    grid-column-gap: 3rem !important;
-  }
-
-  .md\:col-gap-16 {
-    grid-column-gap: 4rem !important;
-  }
-
-  .md\:col-gap-20 {
-    grid-column-gap: 5rem !important;
-  }
-
-  .md\:col-gap-24 {
-    grid-column-gap: 6rem !important;
-  }
-
-  .md\:col-gap-32 {
-    grid-column-gap: 8rem !important;
-  }
-
-  .md\:col-gap-40 {
-    grid-column-gap: 10rem !important;
-  }
-
-  .md\:col-gap-48 {
-    grid-column-gap: 12rem !important;
-  }
-
-  .md\:col-gap-56 {
-    grid-column-gap: 14rem !important;
-  }
-
-  .md\:col-gap-64 {
-    grid-column-gap: 16rem !important;
-  }
-
-  .md\:col-gap-px {
-    grid-column-gap: 1px !important;
-  }
-
   .md\:col-span-1 {
     grid-column: span 1 / span 1 !important;
   }
@@ -27895,82 +27743,6 @@ video {
     grid-column-end: 13 !important;
   }
 
-  .md\:row-gap-0 {
-    grid-row-gap: 0 !important;
-  }
-
-  .md\:row-gap-1 {
-    grid-row-gap: 0.25rem !important;
-  }
-
-  .md\:row-gap-2 {
-    grid-row-gap: 0.5rem !important;
-  }
-
-  .md\:row-gap-3 {
-    grid-row-gap: 0.75rem !important;
-  }
-
-  .md\:row-gap-4 {
-    grid-row-gap: 1rem !important;
-  }
-
-  .md\:row-gap-5 {
-    grid-row-gap: 1.25rem !important;
-  }
-
-  .md\:row-gap-6 {
-    grid-row-gap: 1.5rem !important;
-  }
-
-  .md\:row-gap-8 {
-    grid-row-gap: 2rem !important;
-  }
-
-  .md\:row-gap-10 {
-    grid-row-gap: 2.5rem !important;
-  }
-
-  .md\:row-gap-12 {
-    grid-row-gap: 3rem !important;
-  }
-
-  .md\:row-gap-16 {
-    grid-row-gap: 4rem !important;
-  }
-
-  .md\:row-gap-20 {
-    grid-row-gap: 5rem !important;
-  }
-
-  .md\:row-gap-24 {
-    grid-row-gap: 6rem !important;
-  }
-
-  .md\:row-gap-32 {
-    grid-row-gap: 8rem !important;
-  }
-
-  .md\:row-gap-40 {
-    grid-row-gap: 10rem !important;
-  }
-
-  .md\:row-gap-48 {
-    grid-row-gap: 12rem !important;
-  }
-
-  .md\:row-gap-56 {
-    grid-row-gap: 14rem !important;
-  }
-
-  .md\:row-gap-64 {
-    grid-row-gap: 16rem !important;
-  }
-
-  .md\:row-gap-px {
-    grid-row-gap: 1px !important;
-  }
-
   .md\:transform {
     --transform-scale-x: 1 !important;
     --transform-scale-y: 1 !important;
@@ -37246,6 +37018,82 @@ video {
     z-index: auto !important;
   }
 
+  .lg\:gap-0 {
+    grid-gap: 0 !important;
+  }
+
+  .lg\:gap-1 {
+    grid-gap: 0.25rem !important;
+  }
+
+  .lg\:gap-2 {
+    grid-gap: 0.5rem !important;
+  }
+
+  .lg\:gap-3 {
+    grid-gap: 0.75rem !important;
+  }
+
+  .lg\:gap-4 {
+    grid-gap: 1rem !important;
+  }
+
+  .lg\:gap-5 {
+    grid-gap: 1.25rem !important;
+  }
+
+  .lg\:gap-6 {
+    grid-gap: 1.5rem !important;
+  }
+
+  .lg\:gap-8 {
+    grid-gap: 2rem !important;
+  }
+
+  .lg\:gap-10 {
+    grid-gap: 2.5rem !important;
+  }
+
+  .lg\:gap-12 {
+    grid-gap: 3rem !important;
+  }
+
+  .lg\:gap-16 {
+    grid-gap: 4rem !important;
+  }
+
+  .lg\:gap-20 {
+    grid-gap: 5rem !important;
+  }
+
+  .lg\:gap-24 {
+    grid-gap: 6rem !important;
+  }
+
+  .lg\:gap-32 {
+    grid-gap: 8rem !important;
+  }
+
+  .lg\:gap-40 {
+    grid-gap: 10rem !important;
+  }
+
+  .lg\:gap-48 {
+    grid-gap: 12rem !important;
+  }
+
+  .lg\:gap-56 {
+    grid-gap: 14rem !important;
+  }
+
+  .lg\:gap-64 {
+    grid-gap: 16rem !important;
+  }
+
+  .lg\:gap-px {
+    grid-gap: 1px !important;
+  }
+
   .lg\:grid-cols-1 {
     grid-template-columns: repeat(1, 1fr) !important;
   }
@@ -37294,82 +37142,6 @@ video {
     grid-template-columns: repeat(12, 1fr) !important;
   }
 
-  .lg\:col-gap-0 {
-    grid-column-gap: 0 !important;
-  }
-
-  .lg\:col-gap-1 {
-    grid-column-gap: 0.25rem !important;
-  }
-
-  .lg\:col-gap-2 {
-    grid-column-gap: 0.5rem !important;
-  }
-
-  .lg\:col-gap-3 {
-    grid-column-gap: 0.75rem !important;
-  }
-
-  .lg\:col-gap-4 {
-    grid-column-gap: 1rem !important;
-  }
-
-  .lg\:col-gap-5 {
-    grid-column-gap: 1.25rem !important;
-  }
-
-  .lg\:col-gap-6 {
-    grid-column-gap: 1.5rem !important;
-  }
-
-  .lg\:col-gap-8 {
-    grid-column-gap: 2rem !important;
-  }
-
-  .lg\:col-gap-10 {
-    grid-column-gap: 2.5rem !important;
-  }
-
-  .lg\:col-gap-12 {
-    grid-column-gap: 3rem !important;
-  }
-
-  .lg\:col-gap-16 {
-    grid-column-gap: 4rem !important;
-  }
-
-  .lg\:col-gap-20 {
-    grid-column-gap: 5rem !important;
-  }
-
-  .lg\:col-gap-24 {
-    grid-column-gap: 6rem !important;
-  }
-
-  .lg\:col-gap-32 {
-    grid-column-gap: 8rem !important;
-  }
-
-  .lg\:col-gap-40 {
-    grid-column-gap: 10rem !important;
-  }
-
-  .lg\:col-gap-48 {
-    grid-column-gap: 12rem !important;
-  }
-
-  .lg\:col-gap-56 {
-    grid-column-gap: 14rem !important;
-  }
-
-  .lg\:col-gap-64 {
-    grid-column-gap: 16rem !important;
-  }
-
-  .lg\:col-gap-px {
-    grid-column-gap: 1px !important;
-  }
-
   .lg\:col-span-1 {
     grid-column: span 1 / span 1 !important;
   }
@@ -37522,82 +37294,6 @@ video {
     grid-column-end: 13 !important;
   }
 
-  .lg\:row-gap-0 {
-    grid-row-gap: 0 !important;
-  }
-
-  .lg\:row-gap-1 {
-    grid-row-gap: 0.25rem !important;
-  }
-
-  .lg\:row-gap-2 {
-    grid-row-gap: 0.5rem !important;
-  }
-
-  .lg\:row-gap-3 {
-    grid-row-gap: 0.75rem !important;
-  }
-
-  .lg\:row-gap-4 {
-    grid-row-gap: 1rem !important;
-  }
-
-  .lg\:row-gap-5 {
-    grid-row-gap: 1.25rem !important;
-  }
-
-  .lg\:row-gap-6 {
-    grid-row-gap: 1.5rem !important;
-  }
-
-  .lg\:row-gap-8 {
-    grid-row-gap: 2rem !important;
-  }
-
-  .lg\:row-gap-10 {
-    grid-row-gap: 2.5rem !important;
-  }
-
-  .lg\:row-gap-12 {
-    grid-row-gap: 3rem !important;
-  }
-
-  .lg\:row-gap-16 {
-    grid-row-gap: 4rem !important;
-  }
-
-  .lg\:row-gap-20 {
-    grid-row-gap: 5rem !important;
-  }
-
-  .lg\:row-gap-24 {
-    grid-row-gap: 6rem !important;
-  }
-
-  .lg\:row-gap-32 {
-    grid-row-gap: 8rem !important;
-  }
-
-  .lg\:row-gap-40 {
-    grid-row-gap: 10rem !important;
-  }
-
-  .lg\:row-gap-48 {
-    grid-row-gap: 12rem !important;
-  }
-
-  .lg\:row-gap-56 {
-    grid-row-gap: 14rem !important;
-  }
-
-  .lg\:row-gap-64 {
-    grid-row-gap: 16rem !important;
-  }
-
-  .lg\:row-gap-px {
-    grid-row-gap: 1px !important;
-  }
-
   .lg\:transform {
     --transform-scale-x: 1 !important;
     --transform-scale-y: 1 !important;
@@ -46873,6 +46569,82 @@ video {
     z-index: auto !important;
   }
 
+  .xl\:gap-0 {
+    grid-gap: 0 !important;
+  }
+
+  .xl\:gap-1 {
+    grid-gap: 0.25rem !important;
+  }
+
+  .xl\:gap-2 {
+    grid-gap: 0.5rem !important;
+  }
+
+  .xl\:gap-3 {
+    grid-gap: 0.75rem !important;
+  }
+
+  .xl\:gap-4 {
+    grid-gap: 1rem !important;
+  }
+
+  .xl\:gap-5 {
+    grid-gap: 1.25rem !important;
+  }
+
+  .xl\:gap-6 {
+    grid-gap: 1.5rem !important;
+  }
+
+  .xl\:gap-8 {
+    grid-gap: 2rem !important;
+  }
+
+  .xl\:gap-10 {
+    grid-gap: 2.5rem !important;
+  }
+
+  .xl\:gap-12 {
+    grid-gap: 3rem !important;
+  }
+
+  .xl\:gap-16 {
+    grid-gap: 4rem !important;
+  }
+
+  .xl\:gap-20 {
+    grid-gap: 5rem !important;
+  }
+
+  .xl\:gap-24 {
+    grid-gap: 6rem !important;
+  }
+
+  .xl\:gap-32 {
+    grid-gap: 8rem !important;
+  }
+
+  .xl\:gap-40 {
+    grid-gap: 10rem !important;
+  }
+
+  .xl\:gap-48 {
+    grid-gap: 12rem !important;
+  }
+
+  .xl\:gap-56 {
+    grid-gap: 14rem !important;
+  }
+
+  .xl\:gap-64 {
+    grid-gap: 16rem !important;
+  }
+
+  .xl\:gap-px {
+    grid-gap: 1px !important;
+  }
+
   .xl\:grid-cols-1 {
     grid-template-columns: repeat(1, 1fr) !important;
   }
@@ -46921,82 +46693,6 @@ video {
     grid-template-columns: repeat(12, 1fr) !important;
   }
 
-  .xl\:col-gap-0 {
-    grid-column-gap: 0 !important;
-  }
-
-  .xl\:col-gap-1 {
-    grid-column-gap: 0.25rem !important;
-  }
-
-  .xl\:col-gap-2 {
-    grid-column-gap: 0.5rem !important;
-  }
-
-  .xl\:col-gap-3 {
-    grid-column-gap: 0.75rem !important;
-  }
-
-  .xl\:col-gap-4 {
-    grid-column-gap: 1rem !important;
-  }
-
-  .xl\:col-gap-5 {
-    grid-column-gap: 1.25rem !important;
-  }
-
-  .xl\:col-gap-6 {
-    grid-column-gap: 1.5rem !important;
-  }
-
-  .xl\:col-gap-8 {
-    grid-column-gap: 2rem !important;
-  }
-
-  .xl\:col-gap-10 {
-    grid-column-gap: 2.5rem !important;
-  }
-
-  .xl\:col-gap-12 {
-    grid-column-gap: 3rem !important;
-  }
-
-  .xl\:col-gap-16 {
-    grid-column-gap: 4rem !important;
-  }
-
-  .xl\:col-gap-20 {
-    grid-column-gap: 5rem !important;
-  }
-
-  .xl\:col-gap-24 {
-    grid-column-gap: 6rem !important;
-  }
-
-  .xl\:col-gap-32 {
-    grid-column-gap: 8rem !important;
-  }
-
-  .xl\:col-gap-40 {
-    grid-column-gap: 10rem !important;
-  }
-
-  .xl\:col-gap-48 {
-    grid-column-gap: 12rem !important;
-  }
-
-  .xl\:col-gap-56 {
-    grid-column-gap: 14rem !important;
-  }
-
-  .xl\:col-gap-64 {
-    grid-column-gap: 16rem !important;
-  }
-
-  .xl\:col-gap-px {
-    grid-column-gap: 1px !important;
-  }
-
   .xl\:col-span-1 {
     grid-column: span 1 / span 1 !important;
   }
@@ -47149,82 +46845,6 @@ video {
     grid-column-end: 13 !important;
   }
 
-  .xl\:row-gap-0 {
-    grid-row-gap: 0 !important;
-  }
-
-  .xl\:row-gap-1 {
-    grid-row-gap: 0.25rem !important;
-  }
-
-  .xl\:row-gap-2 {
-    grid-row-gap: 0.5rem !important;
-  }
-
-  .xl\:row-gap-3 {
-    grid-row-gap: 0.75rem !important;
-  }
-
-  .xl\:row-gap-4 {
-    grid-row-gap: 1rem !important;
-  }
-
-  .xl\:row-gap-5 {
-    grid-row-gap: 1.25rem !important;
-  }
-
-  .xl\:row-gap-6 {
-    grid-row-gap: 1.5rem !important;
-  }
-
-  .xl\:row-gap-8 {
-    grid-row-gap: 2rem !important;
-  }
-
-  .xl\:row-gap-10 {
-    grid-row-gap: 2.5rem !important;
-  }
-
-  .xl\:row-gap-12 {
-    grid-row-gap: 3rem !important;
-  }
-
-  .xl\:row-gap-16 {
-    grid-row-gap: 4rem !important;
-  }
-
-  .xl\:row-gap-20 {
-    grid-row-gap: 5rem !important;
-  }
-
-  .xl\:row-gap-24 {
-    grid-row-gap: 6rem !important;
-  }
-
-  .xl\:row-gap-32 {
-    grid-row-gap: 8rem !important;
-  }
-
-  .xl\:row-gap-40 {
-    grid-row-gap: 10rem !important;
-  }
-
-  .xl\:row-gap-48 {
-    grid-row-gap: 12rem !important;
-  }
-
-  .xl\:row-gap-56 {
-    grid-row-gap: 14rem !important;
-  }
-
-  .xl\:row-gap-64 {
-    grid-row-gap: 16rem !important;
-  }
-
-  .xl\:row-gap-px {
-    grid-row-gap: 1px !important;
-  }
-
   .xl\:transform {
     --transform-scale-x: 1 !important;
     --transform-scale-y: 1 !important;
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index d7741d7e2..036396d61 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -8366,6 +8366,82 @@ video {
   z-index: auto;
 }
 
+.gap-0 {
+  grid-gap: 0;
+}
+
+.gap-1 {
+  grid-gap: 0.25rem;
+}
+
+.gap-2 {
+  grid-gap: 0.5rem;
+}
+
+.gap-3 {
+  grid-gap: 0.75rem;
+}
+
+.gap-4 {
+  grid-gap: 1rem;
+}
+
+.gap-5 {
+  grid-gap: 1.25rem;
+}
+
+.gap-6 {
+  grid-gap: 1.5rem;
+}
+
+.gap-8 {
+  grid-gap: 2rem;
+}
+
+.gap-10 {
+  grid-gap: 2.5rem;
+}
+
+.gap-12 {
+  grid-gap: 3rem;
+}
+
+.gap-16 {
+  grid-gap: 4rem;
+}
+
+.gap-20 {
+  grid-gap: 5rem;
+}
+
+.gap-24 {
+  grid-gap: 6rem;
+}
+
+.gap-32 {
+  grid-gap: 8rem;
+}
+
+.gap-40 {
+  grid-gap: 10rem;
+}
+
+.gap-48 {
+  grid-gap: 12rem;
+}
+
+.gap-56 {
+  grid-gap: 14rem;
+}
+
+.gap-64 {
+  grid-gap: 16rem;
+}
+
+.gap-px {
+  grid-gap: 1px;
+}
+
 .grid-cols-1 {
   grid-template-columns: repeat(1, 1fr);
 }
@@ -8414,82 +8490,6 @@ video {
   grid-template-columns: repeat(12, 1fr);
 }
 
-.col-gap-0 {
-  grid-column-gap: 0;
-}
-
-.col-gap-1 {
-  grid-column-gap: 0.25rem;
-}
-
-.col-gap-2 {
-  grid-column-gap: 0.5rem;
-}
-
-.col-gap-3 {
-  grid-column-gap: 0.75rem;
-}
-
-.col-gap-4 {
-  grid-column-gap: 1rem;
-}
-
-.col-gap-5 {
-  grid-column-gap: 1.25rem;
-}
-
-.col-gap-6 {
-  grid-column-gap: 1.5rem;
-}
-
-.col-gap-8 {
-  grid-column-gap: 2rem;
-}
-
-.col-gap-10 {
-  grid-column-gap: 2.5rem;
-}
-
-.col-gap-12 {
-  grid-column-gap: 3rem;
-}
-
-.col-gap-16 {
-  grid-column-gap: 4rem;
-}
-
-.col-gap-20 {
-  grid-column-gap: 5rem;
-}
-
-.col-gap-24 {
-  grid-column-gap: 6rem;
-}
-
-.col-gap-32 {
-  grid-column-gap: 8rem;
-}
-
-.col-gap-40 {
-  grid-column-gap: 10rem;
-}
-
-.col-gap-48 {
-  grid-column-gap: 12rem;
-}
-
-.col-gap-56 {
-  grid-column-gap: 14rem;
-}
-
-.col-gap-64 {
-  grid-column-gap: 16rem;
-}
-
-.col-gap-px {
-  grid-column-gap: 1px;
-}
-
 .col-span-1 {
   grid-column: span 1 / span 1;
 }
@@ -8642,82 +8642,6 @@ video {
   grid-column-end: 13;
 }
 
-.row-gap-0 {
-  grid-row-gap: 0;
-}
-
-.row-gap-1 {
-  grid-row-gap: 0.25rem;
-}
-
-.row-gap-2 {
-  grid-row-gap: 0.5rem;
-}
-
-.row-gap-3 {
-  grid-row-gap: 0.75rem;
-}
-
-.row-gap-4 {
-  grid-row-gap: 1rem;
-}
-
-.row-gap-5 {
-  grid-row-gap: 1.25rem;
-}
-
-.row-gap-6 {
-  grid-row-gap: 1.5rem;
-}
-
-.row-gap-8 {
-  grid-row-gap: 2rem;
-}
-
-.row-gap-10 {
-  grid-row-gap: 2.5rem;
-}
-
-.row-gap-12 {
-  grid-row-gap: 3rem;
-}
-
-.row-gap-16 {
-  grid-row-gap: 4rem;
-}
-
-.row-gap-20 {
-  grid-row-gap: 5rem;
-}
-
-.row-gap-24 {
-  grid-row-gap: 6rem;
-}
-
-.row-gap-32 {
-  grid-row-gap: 8rem;
-}
-
-.row-gap-40 {
-  grid-row-gap: 10rem;
-}
-
-.row-gap-48 {
-  grid-row-gap: 12rem;
-}
-
-.row-gap-56 {
-  grid-row-gap: 14rem;
-}
-
-.row-gap-64 {
-  grid-row-gap: 16rem;
-}
-
-.row-gap-px {
-  grid-row-gap: 1px;
-}
-
 .transform {
   --transform-scale-x: 1;
   --transform-scale-y: 1;
@@ -17992,6 +17916,82 @@ video {
     z-index: auto;
   }
 
+  .sm\:gap-0 {
+    grid-gap: 0;
+  }
+
+  .sm\:gap-1 {
+    grid-gap: 0.25rem;
+  }
+
+  .sm\:gap-2 {
+    grid-gap: 0.5rem;
+  }
+
+  .sm\:gap-3 {
+    grid-gap: 0.75rem;
+  }
+
+  .sm\:gap-4 {
+    grid-gap: 1rem;
+  }
+
+  .sm\:gap-5 {
+    grid-gap: 1.25rem;
+  }
+
+  .sm\:gap-6 {
+    grid-gap: 1.5rem;
+  }
+
+  .sm\:gap-8 {
+    grid-gap: 2rem;
+  }
+
+  .sm\:gap-10 {
+    grid-gap: 2.5rem;
+  }
+
+  .sm\:gap-12 {
+    grid-gap: 3rem;
+  }
+
+  .sm\:gap-16 {
+    grid-gap: 4rem;
+  }
+
+  .sm\:gap-20 {
+    grid-gap: 5rem;
+  }
+
+  .sm\:gap-24 {
+    grid-gap: 6rem;
+  }
+
+  .sm\:gap-32 {
+    grid-gap: 8rem;
+  }
+
+  .sm\:gap-40 {
+    grid-gap: 10rem;
+  }
+
+  .sm\:gap-48 {
+    grid-gap: 12rem;
+  }
+
+  .sm\:gap-56 {
+    grid-gap: 14rem;
+  }
+
+  .sm\:gap-64 {
+    grid-gap: 16rem;
+  }
+
+  .sm\:gap-px {
+    grid-gap: 1px;
+  }
+
   .sm\:grid-cols-1 {
     grid-template-columns: repeat(1, 1fr);
   }
@@ -18040,82 +18040,6 @@ video {
     grid-template-columns: repeat(12, 1fr);
   }
 
-  .sm\:col-gap-0 {
-    grid-column-gap: 0;
-  }
-
-  .sm\:col-gap-1 {
-    grid-column-gap: 0.25rem;
-  }
-
-  .sm\:col-gap-2 {
-    grid-column-gap: 0.5rem;
-  }
-
-  .sm\:col-gap-3 {
-    grid-column-gap: 0.75rem;
-  }
-
-  .sm\:col-gap-4 {
-    grid-column-gap: 1rem;
-  }
-
-  .sm\:col-gap-5 {
-    grid-column-gap: 1.25rem;
-  }
-
-  .sm\:col-gap-6 {
-    grid-column-gap: 1.5rem;
-  }
-
-  .sm\:col-gap-8 {
-    grid-column-gap: 2rem;
-  }
-
-  .sm\:col-gap-10 {
-    grid-column-gap: 2.5rem;
-  }
-
-  .sm\:col-gap-12 {
-    grid-column-gap: 3rem;
-  }
-
-  .sm\:col-gap-16 {
-    grid-column-gap: 4rem;
-  }
-
-  .sm\:col-gap-20 {
-    grid-column-gap: 5rem;
-  }
-
-  .sm\:col-gap-24 {
-    grid-column-gap: 6rem;
-  }
-
-  .sm\:col-gap-32 {
-    grid-column-gap: 8rem;
-  }
-
-  .sm\:col-gap-40 {
-    grid-column-gap: 10rem;
-  }
-
-  .sm\:col-gap-48 {
-    grid-column-gap: 12rem;
-  }
-
-  .sm\:col-gap-56 {
-    grid-column-gap: 14rem;
-  }
-
-  .sm\:col-gap-64 {
-    grid-column-gap: 16rem;
-  }
-
-  .sm\:col-gap-px {
-    grid-column-gap: 1px;
-  }
-
   .sm\:col-span-1 {
     grid-column: span 1 / span 1;
   }
@@ -18268,82 +18192,6 @@ video {
     grid-column-end: 13;
   }
 
-  .sm\:row-gap-0 {
-    grid-row-gap: 0;
-  }
-
-  .sm\:row-gap-1 {
-    grid-row-gap: 0.25rem;
-  }
-
-  .sm\:row-gap-2 {
-    grid-row-gap: 0.5rem;
-  }
-
-  .sm\:row-gap-3 {
-    grid-row-gap: 0.75rem;
-  }
-
-  .sm\:row-gap-4 {
-    grid-row-gap: 1rem;
-  }
-
-  .sm\:row-gap-5 {
-    grid-row-gap: 1.25rem;
-  }
-
-  .sm\:row-gap-6 {
-    grid-row-gap: 1.5rem;
-  }
-
-  .sm\:row-gap-8 {
-    grid-row-gap: 2rem;
-  }
-
-  .sm\:row-gap-10 {
-    grid-row-gap: 2.5rem;
-  }
-
-  .sm\:row-gap-12 {
-    grid-row-gap: 3rem;
-  }
-
-  .sm\:row-gap-16 {
-    grid-row-gap: 4rem;
-  }
-
-  .sm\:row-gap-20 {
-    grid-row-gap: 5rem;
-  }
-
-  .sm\:row-gap-24 {
-    grid-row-gap: 6rem;
-  }
-
-  .sm\:row-gap-32 {
-    grid-row-gap: 8rem;
-  }
-
-  .sm\:row-gap-40 {
-    grid-row-gap: 10rem;
-  }
-
-  .sm\:row-gap-48 {
-    grid-row-gap: 12rem;
-  }
-
-  .sm\:row-gap-56 {
-    grid-row-gap: 14rem;
-  }
-
-  .sm\:row-gap-64 {
-    grid-row-gap: 16rem;
-  }
-
-  .sm\:row-gap-px {
-    grid-row-gap: 1px;
-  }
-
   .sm\:transform {
     --transform-scale-x: 1;
     --transform-scale-y: 1;
@@ -27619,6 +27467,82 @@ video {
     z-index: auto;
   }
 
+  .md\:gap-0 {
+    grid-gap: 0;
+  }
+
+  .md\:gap-1 {
+    grid-gap: 0.25rem;
+  }
+
+  .md\:gap-2 {
+    grid-gap: 0.5rem;
+  }
+
+  .md\:gap-3 {
+    grid-gap: 0.75rem;
+  }
+
+  .md\:gap-4 {
+    grid-gap: 1rem;
+  }
+
+  .md\:gap-5 {
+    grid-gap: 1.25rem;
+  }
+
+  .md\:gap-6 {
+    grid-gap: 1.5rem;
+  }
+
+  .md\:gap-8 {
+    grid-gap: 2rem;
+  }
+
+  .md\:gap-10 {
+    grid-gap: 2.5rem;
+  }
+
+  .md\:gap-12 {
+    grid-gap: 3rem;
+  }
+
+  .md\:gap-16 {
+    grid-gap: 4rem;
+  }
+
+  .md\:gap-20 {
+    grid-gap: 5rem;
+  }
+
+  .md\:gap-24 {
+    grid-gap: 6rem;
+  }
+
+  .md\:gap-32 {
+    grid-gap: 8rem;
+  }
+
+  .md\:gap-40 {
+    grid-gap: 10rem;
+  }
+
+  .md\:gap-48 {
+    grid-gap: 12rem;
+  }
+
+  .md\:gap-56 {
+    grid-gap: 14rem;
+  }
+
+  .md\:gap-64 {
+    grid-gap: 16rem;
+  }
+
+  .md\:gap-px {
+    grid-gap: 1px;
+  }
+
   .md\:grid-cols-1 {
     grid-template-columns: repeat(1, 1fr);
   }
@@ -27667,82 +27591,6 @@ video {
     grid-template-columns: repeat(12, 1fr);
   }
 
-  .md\:col-gap-0 {
-    grid-column-gap: 0;
-  }
-
-  .md\:col-gap-1 {
-    grid-column-gap: 0.25rem;
-  }
-
-  .md\:col-gap-2 {
-    grid-column-gap: 0.5rem;
-  }
-
-  .md\:col-gap-3 {
-    grid-column-gap: 0.75rem;
-  }
-
-  .md\:col-gap-4 {
-    grid-column-gap: 1rem;
-  }
-
-  .md\:col-gap-5 {
-    grid-column-gap: 1.25rem;
-  }
-
-  .md\:col-gap-6 {
-    grid-column-gap: 1.5rem;
-  }
-
-  .md\:col-gap-8 {
-    grid-column-gap: 2rem;
-  }
-
-  .md\:col-gap-10 {
-    grid-column-gap: 2.5rem;
-  }
-
-  .md\:col-gap-12 {
-    grid-column-gap: 3rem;
-  }
-
-  .md\:col-gap-16 {
-    grid-column-gap: 4rem;
-  }
-
-  .md\:col-gap-20 {
-    grid-column-gap: 5rem;
-  }
-
-  .md\:col-gap-24 {
-    grid-column-gap: 6rem;
-  }
-
-  .md\:col-gap-32 {
-    grid-column-gap: 8rem;
-  }
-
-  .md\:col-gap-40 {
-    grid-column-gap: 10rem;
-  }
-
-  .md\:col-gap-48 {
-    grid-column-gap: 12rem;
-  }
-
-  .md\:col-gap-56 {
-    grid-column-gap: 14rem;
-  }
-
-  .md\:col-gap-64 {
-    grid-column-gap: 16rem;
-  }
-
-  .md\:col-gap-px {
-    grid-column-gap: 1px;
-  }
-
   .md\:col-span-1 {
     grid-column: span 1 / span 1;
   }
@@ -27895,82 +27743,6 @@ video {
     grid-column-end: 13;
   }
 
-  .md\:row-gap-0 {
-    grid-row-gap: 0;
-  }
-
-  .md\:row-gap-1 {
-    grid-row-gap: 0.25rem;
-  }
-
-  .md\:row-gap-2 {
-    grid-row-gap: 0.5rem;
-  }
-
-  .md\:row-gap-3 {
-    grid-row-gap: 0.75rem;
-  }
-
-  .md\:row-gap-4 {
-    grid-row-gap: 1rem;
-  }
-
-  .md\:row-gap-5 {
-    grid-row-gap: 1.25rem;
-  }
-
-  .md\:row-gap-6 {
-    grid-row-gap: 1.5rem;
-  }
-
-  .md\:row-gap-8 {
-    grid-row-gap: 2rem;
-  }
-
-  .md\:row-gap-10 {
-    grid-row-gap: 2.5rem;
-  }
-
-  .md\:row-gap-12 {
-    grid-row-gap: 3rem;
-  }
-
-  .md\:row-gap-16 {
-    grid-row-gap: 4rem;
-  }
-
-  .md\:row-gap-20 {
-    grid-row-gap: 5rem;
-  }
-
-  .md\:row-gap-24 {
-    grid-row-gap: 6rem;
-  }
-
-  .md\:row-gap-32 {
-    grid-row-gap: 8rem;
-  }
-
-  .md\:row-gap-40 {
-    grid-row-gap: 10rem;
-  }
-
-  .md\:row-gap-48 {
-    grid-row-gap: 12rem;
-  }
-
-  .md\:row-gap-56 {
-    grid-row-gap: 14rem;
-  }
-
-  .md\:row-gap-64 {
-    grid-row-gap: 16rem;
-  }
-
-  .md\:row-gap-px {
-    grid-row-gap: 1px;
-  }
-
   .md\:transform {
     --transform-scale-x: 1;
     --transform-scale-y: 1;
@@ -37246,6 +37018,82 @@ video {
     z-index: auto;
   }
 
+  .lg\:gap-0 {
+    grid-gap: 0;
+  }
+
+  .lg\:gap-1 {
+    grid-gap: 0.25rem;
+  }
+
+  .lg\:gap-2 {
+    grid-gap: 0.5rem;
+  }
+
+  .lg\:gap-3 {
+    grid-gap: 0.75rem;
+  }
+
+  .lg\:gap-4 {
+    grid-gap: 1rem;
+  }
+
+  .lg\:gap-5 {
+    grid-gap: 1.25rem;
+  }
+
+  .lg\:gap-6 {
+    grid-gap: 1.5rem;
+  }
+
+  .lg\:gap-8 {
+    grid-gap: 2rem;
+  }
+
+  .lg\:gap-10 {
+    grid-gap: 2.5rem;
+  }
+
+  .lg\:gap-12 {
+    grid-gap: 3rem;
+  }
+
+  .lg\:gap-16 {
+    grid-gap: 4rem;
+  }
+
+  .lg\:gap-20 {
+    grid-gap: 5rem;
+  }
+
+  .lg\:gap-24 {
+    grid-gap: 6rem;
+  }
+
+  .lg\:gap-32 {
+    grid-gap: 8rem;
+  }
+
+  .lg\:gap-40 {
+    grid-gap: 10rem;
+  }
+
+  .lg\:gap-48 {
+    grid-gap: 12rem;
+  }
+
+  .lg\:gap-56 {
+    grid-gap: 14rem;
+  }
+
+  .lg\:gap-64 {
+    grid-gap: 16rem;
+  }
+
+  .lg\:gap-px {
+    grid-gap: 1px;
+  }
+
   .lg\:grid-cols-1 {
     grid-template-columns: repeat(1, 1fr);
   }
@@ -37294,82 +37142,6 @@ video {
     grid-template-columns: repeat(12, 1fr);
   }
 
-  .lg\:col-gap-0 {
-    grid-column-gap: 0;
-  }
-
-  .lg\:col-gap-1 {
-    grid-column-gap: 0.25rem;
-  }
-
-  .lg\:col-gap-2 {
-    grid-column-gap: 0.5rem;
-  }
-
-  .lg\:col-gap-3 {
-    grid-column-gap: 0.75rem;
-  }
-
-  .lg\:col-gap-4 {
-    grid-column-gap: 1rem;
-  }
-
-  .lg\:col-gap-5 {
-    grid-column-gap: 1.25rem;
-  }
-
-  .lg\:col-gap-6 {
-    grid-column-gap: 1.5rem;
-  }
-
-  .lg\:col-gap-8 {
-    grid-column-gap: 2rem;
-  }
-
-  .lg\:col-gap-10 {
-    grid-column-gap: 2.5rem;
-  }
-
-  .lg\:col-gap-12 {
-    grid-column-gap: 3rem;
-  }
-
-  .lg\:col-gap-16 {
-    grid-column-gap: 4rem;
-  }
-
-  .lg\:col-gap-20 {
-    grid-column-gap: 5rem;
-  }
-
-  .lg\:col-gap-24 {
-    grid-column-gap: 6rem;
-  }
-
-  .lg\:col-gap-32 {
-    grid-column-gap: 8rem;
-  }
-
-  .lg\:col-gap-40 {
-    grid-column-gap: 10rem;
-  }
-
-  .lg\:col-gap-48 {
-    grid-column-gap: 12rem;
-  }
-
-  .lg\:col-gap-56 {
-    grid-column-gap: 14rem;
-  }
-
-  .lg\:col-gap-64 {
-    grid-column-gap: 16rem;
-  }
-
-  .lg\:col-gap-px {
-    grid-column-gap: 1px;
-  }
-
   .lg\:col-span-1 {
     grid-column: span 1 / span 1;
   }
@@ -37522,82 +37294,6 @@ video {
     grid-column-end: 13;
   }
 
-  .lg\:row-gap-0 {
-    grid-row-gap: 0;
-  }
-
-  .lg\:row-gap-1 {
-    grid-row-gap: 0.25rem;
-  }
-
-  .lg\:row-gap-2 {
-    grid-row-gap: 0.5rem;
-  }
-
-  .lg\:row-gap-3 {
-    grid-row-gap: 0.75rem;
-  }
-
-  .lg\:row-gap-4 {
-    grid-row-gap: 1rem;
-  }
-
-  .lg\:row-gap-5 {
-    grid-row-gap: 1.25rem;
-  }
-
-  .lg\:row-gap-6 {
-    grid-row-gap: 1.5rem;
-  }
-
-  .lg\:row-gap-8 {
-    grid-row-gap: 2rem;
-  }
-
-  .lg\:row-gap-10 {
-    grid-row-gap: 2.5rem;
-  }
-
-  .lg\:row-gap-12 {
-    grid-row-gap: 3rem;
-  }
-
-  .lg\:row-gap-16 {
-    grid-row-gap: 4rem;
-  }
-
-  .lg\:row-gap-20 {
-    grid-row-gap: 5rem;
-  }
-
-  .lg\:row-gap-24 {
-    grid-row-gap: 6rem;
-  }
-
-  .lg\:row-gap-32 {
-    grid-row-gap: 8rem;
-  }
-
-  .lg\:row-gap-40 {
-    grid-row-gap: 10rem;
-  }
-
-  .lg\:row-gap-48 {
-    grid-row-gap: 12rem;
-  }
-
-  .lg\:row-gap-56 {
-    grid-row-gap: 14rem;
-  }
-
-  .lg\:row-gap-64 {
-    grid-row-gap: 16rem;
-  }
-
-  .lg\:row-gap-px {
-    grid-row-gap: 1px;
-  }
-
   .lg\:transform {
     --transform-scale-x: 1;
     --transform-scale-y: 1;
@@ -46873,6 +46569,82 @@ video {
     z-index: auto;
   }
 
+  .xl\:gap-0 {
+    grid-gap: 0;
+  }
+
+  .xl\:gap-1 {
+    grid-gap: 0.25rem;
+  }
+
+  .xl\:gap-2 {
+    grid-gap: 0.5rem;
+  }
+
+  .xl\:gap-3 {
+    grid-gap: 0.75rem;
+  }
+
+  .xl\:gap-4 {
+    grid-gap: 1rem;
+  }
+
+  .xl\:gap-5 {
+    grid-gap: 1.25rem;
+  }
+
+  .xl\:gap-6 {
+    grid-gap: 1.5rem;
+  }
+
+  .xl\:gap-8 {
+    grid-gap: 2rem;
+  }
+
+  .xl\:gap-10 {
+    grid-gap: 2.5rem;
+  }
+
+  .xl\:gap-12 {
+    grid-gap: 3rem;
+  }
+
+  .xl\:gap-16 {
+    grid-gap: 4rem;
+  }
+
+  .xl\:gap-20 {
+    grid-gap: 5rem;
+  }
+
+  .xl\:gap-24 {
+    grid-gap: 6rem;
+  }
+
+  .xl\:gap-32 {
+    grid-gap: 8rem;
+  }
+
+  .xl\:gap-40 {
+    grid-gap: 10rem;
+  }
+
+  .xl\:gap-48 {
+    grid-gap: 12rem;
+  }
+
+  .xl\:gap-56 {
+    grid-gap: 14rem;
+  }
+
+  .xl\:gap-64 {
+    grid-gap: 16rem;
+  }
+
+  .xl\:gap-px {
+    grid-gap: 1px;
+  }
+
   .xl\:grid-cols-1 {
     grid-template-columns: repeat(1, 1fr);
   }
@@ -46921,82 +46693,6 @@ video {
     grid-template-columns: repeat(12, 1fr);
   }
 
-  .xl\:col-gap-0 {
-    grid-column-gap: 0;
-  }
-
-  .xl\:col-gap-1 {
-    grid-column-gap: 0.25rem;
-  }
-
-  .xl\:col-gap-2 {
-    grid-column-gap: 0.5rem;
-  }
-
-  .xl\:col-gap-3 {
-    grid-column-gap: 0.75rem;
-  }
-
-  .xl\:col-gap-4 {
-    grid-column-gap: 1rem;
-  }
-
-  .xl\:col-gap-5 {
-    grid-column-gap: 1.25rem;
-  }
-
-  .xl\:col-gap-6 {
-    grid-column-gap: 1.5rem;
-  }
-
-  .xl\:col-gap-8 {
-    grid-column-gap: 2rem;
-  }
-
-  .xl\:col-gap-10 {
-    grid-column-gap: 2.5rem;
-  }
-
-  .xl\:col-gap-12 {
-    grid-column-gap: 3rem;
-  }
-
-  .xl\:col-gap-16 {
-    grid-column-gap: 4rem;
-  }
-
-  .xl\:col-gap-20 {
-    grid-column-gap: 5rem;
-  }
-
-  .xl\:col-gap-24 {
-    grid-column-gap: 6rem;
-  }
-
-  .xl\:col-gap-32 {
-    grid-column-gap: 8rem;
-  }
-
-  .xl\:col-gap-40 {
-    grid-column-gap: 10rem;
-  }
-
-  .xl\:col-gap-48 {
-    grid-column-gap: 12rem;
-  }
-
-  .xl\:col-gap-56 {
-    grid-column-gap: 14rem;
-  }
-
-  .xl\:col-gap-64 {
-    grid-column-gap: 16rem;
-  }
-
-  .xl\:col-gap-px {
-    grid-column-gap: 1px;
-  }
-
   .xl\:col-span-1 {
     grid-column: span 1 / span 1;
   }
@@ -47149,82 +46845,6 @@ video {
     grid-column-end: 13;
   }
 
-  .xl\:row-gap-0 {
-    grid-row-gap: 0;
-  }
-
-  .xl\:row-gap-1 {
-    grid-row-gap: 0.25rem;
-  }
-
-  .xl\:row-gap-2 {
-    grid-row-gap: 0.5rem;
-  }
-
-  .xl\:row-gap-3 {
-    grid-row-gap: 0.75rem;
-  }
-
-  .xl\:row-gap-4 {
-    grid-row-gap: 1rem;
-  }
-
-  .xl\:row-gap-5 {
-    grid-row-gap: 1.25rem;
-  }
-
-  .xl\:row-gap-6 {
-    grid-row-gap: 1.5rem;
-  }
-
-  .xl\:row-gap-8 {
-    grid-row-gap: 2rem;
-  }
-
-  .xl\:row-gap-10 {
-    grid-row-gap: 2.5rem;
-  }
-
-  .xl\:row-gap-12 {
-    grid-row-gap: 3rem;
-  }
-
-  .xl\:row-gap-16 {
-    grid-row-gap: 4rem;
-  }
-
-  .xl\:row-gap-20 {
-    grid-row-gap: 5rem;
-  }
-
-  .xl\:row-gap-24 {
-    grid-row-gap: 6rem;
-  }
-
-  .xl\:row-gap-32 {
-    grid-row-gap: 8rem;
-  }
-
-  .xl\:row-gap-40 {
-    grid-row-gap: 10rem;
-  }
-
-  .xl\:row-gap-48 {
-    grid-row-gap: 12rem;
-  }
-
-  .xl\:row-gap-56 {
-    grid-row-gap: 14rem;
-  }
-
-  .xl\:row-gap-64 {
-    grid-row-gap: 16rem;
-  }
-
-  .xl\:row-gap-px {
-    grid-row-gap: 1px;
-  }
-
   .xl\:transform {
     --transform-scale-x: 1;
     --transform-scale-y: 1;
diff --git a/src/corePlugins.js b/src/corePlugins.js
index 27cfc9bbf..d7ca84e5c 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -71,6 +71,7 @@ import transformOrigin from './plugins/transformOrigin'
 import scale from './plugins/scale'
 import rotate from './plugins/rotate'
 import translate from './plugins/translate'
+import gridGap from './plugins/gridGap'
 import gridTemplateColumns from './plugins/gridTemplateColumns'
 import gridColumnGap from './plugins/gridColumnGap'
 import gridColumn from './plugins/gridColumn'
@@ -154,6 +155,7 @@ export default function({ corePlugins: corePluginConfig }) {
     wordBreak,
     width,
     zIndex,
+    gridGap,
     gridTemplateColumns,
     gridColumnGap,
     gridColumn,
diff --git a/src/plugins/gridGap.js b/src/plugins/gridGap.js
new file mode 100644
index 000000000..ec8d0e535
--- /dev/null
+++ b/src/plugins/gridGap.js
@@ -0,0 +1,5 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function() {
+  return createUtilityPlugin('gridGap', [['gap', ['gridGap']]])
+}
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index f496f5f5b..27a91f988 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -405,6 +405,7 @@ module.exports = {
       '40': '40',
       '50': '50',
     },
+    gridGap: theme => theme('spacing'),
     gridTemplateColumns: {
       '1': 'repeat(1, 1fr)',
       '2': 'repeat(2, 1fr)',
@@ -419,7 +420,7 @@ module.exports = {
       '11': 'repeat(11, 1fr)',
       '12': 'repeat(12, 1fr)',
     },
-    gridColumnGap: theme => theme('spacing'),
+    gridColumnGap: {},
     gridColumn: {
       'span-1': 'span 1 / span 1',
       'span-2': 'span 2 / span 2',
@@ -465,7 +466,7 @@ module.exports = {
       '13': '13',
     },
     gridTemplateRows: {},
-    gridRowGap: theme => theme('spacing'),
+    gridRowGap: {},
     gridRow: {},
     gridRowStart: {},
     gridRowEnd: {},
@@ -577,6 +578,7 @@ module.exports = {
     width: ['responsive'],
     wordBreak: ['responsive'],
     zIndex: ['responsive'],
+    gridGap: ['responsive'],
     gridTemplateColumns: ['responsive'],
     gridColumnGap: ['responsive'],
     gridColumn: ['responsive'],