Repository: tailwindlabs/tailwindcss
Pull request #2137 (2020-08-06 20:33:35)

Deprecate col-gap and row-gap in favor of gap-x and gap-y
This PR renames the `col-gap` and `row-gap` utilities to `gap-x` and `gap-y` accordingly. I don't know what possessed me to ever name them `col-gap` and `row-gap` because it's inconsistent with how other things in Tailwind are named, and it trips me up constantly. Is `row-gap` the gaps in a row, or the gaps between rows? Always gets me.

The new names feel more natural when using gap with Flexbox too (even though Flexbox does still use `column-gap` and `row-gap` as the CSS property names) because Flexbox doesn't really have rows and columns.

Shorter too 🤷 

This PR introduces the new names alongside the old names (so increasing the CSS size a little bit), and adds the ability to remove the old names behind a `removeDeprecatedGapUtilities` flag under the `future` key.

You can opt-in to removing the old names like this:

```js
// tailwind.config.js
module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
  },
}
```

The console will emit a warning for anyone who *doesn't* opt-in to this after they upgrade, which should help nudge people to make this change in preparation for Tailwind 2.0.

Before I merge this I'll need to make sure I create a documentation page for this flagging stuff so that we can put a link in the console warning directing people to a place where they can learn more about the warning and the consequences of making the change.


Patch:
diff --git a/src/featureFlags.js b/src/featureFlags.js
index 56abf546..3a58002a 100644
--- a/src/featureFlags.js
+++ b/src/featureFlags.js
@@ -2,7 +2,7 @@ import _ from 'lodash'
 import chalk from 'chalk'
 
 const featureFlags = {
-  future: [],
+  future: ['removeDeprecatedGapUtilities'],
   experimental: ['uniformColorPalette'],
 }
 
@@ -93,6 +93,7 @@ export function issueFlagNotices(config) {
     log.risk(
       'We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future.'
     )
+    log.risk('https://tailwindcss.com/docs/upcoming-changes')
   }
 }
 
diff --git a/src/plugins/gap.js b/src/plugins/gap.js
index 94cc3e89..84d312b3 100644
--- a/src/plugins/gap.js
+++ b/src/plugins/gap.js
@@ -1,15 +1,26 @@
 import createUtilityPlugin from '../util/createUtilityPlugin'
+import { flagEnabled } from '../featureFlags'
 
 export default function() {
-  return function({ target, ...args }) {
+  return function({ target, config, ...args }) {
     if (target('gap') === 'ie11') {
       return
     }
 
-    createUtilityPlugin('gap', [
-      ['gap', ['gridGap', 'gap']],
-      ['col-gap', ['gridColumnGap', 'columnGap']],
-      ['row-gap', ['gridRowGap', 'rowGap']],
-    ])({ target, ...args })
+    if (flagEnabled(config(), 'removeDeprecatedGapUtilities')) {
+      createUtilityPlugin('gap', [
+        ['gap', ['gridGap', 'gap']],
+        ['gap-x', ['gridColumnGap', 'columnGap']],
+        ['gap-y', ['gridRowGap', 'rowGap']],
+      ])({ target, config, ...args })
+    } else {
+      createUtilityPlugin('gap', [
+        ['gap', ['gridGap', 'gap']],
+        ['col-gap', ['gridColumnGap', 'columnGap']],
+        ['gap-x', ['gridColumnGap', 'columnGap']],
+        ['row-gap', ['gridRowGap', 'rowGap']],
+        ['gap-y', ['gridRowGap', 'rowGap']],
+      ])({ target, config, ...args })
+    }
   }
 }


Test patch:
diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css
index d376b866..8f250788 100644
--- a/__tests__/fixtures/tailwind-output-flagged.css
+++ b/__tests__/fixtures/tailwind-output-flagged.css
@@ -12765,192 +12765,192 @@ video {
   gap: 1px;
 }
 
-.col-gap-0 {
+.gap-x-0 {
   grid-column-gap: 0;
   column-gap: 0;
 }
 
-.col-gap-1 {
+.gap-x-1 {
   grid-column-gap: 0.25rem;
   column-gap: 0.25rem;
 }
 
-.col-gap-2 {
+.gap-x-2 {
   grid-column-gap: 0.5rem;
   column-gap: 0.5rem;
 }
 
-.col-gap-3 {
+.gap-x-3 {
   grid-column-gap: 0.75rem;
   column-gap: 0.75rem;
 }
 
-.col-gap-4 {
+.gap-x-4 {
   grid-column-gap: 1rem;
   column-gap: 1rem;
 }
 
-.col-gap-5 {
+.gap-x-5 {
   grid-column-gap: 1.25rem;
   column-gap: 1.25rem;
 }
 
-.col-gap-6 {
+.gap-x-6 {
   grid-column-gap: 1.5rem;
   column-gap: 1.5rem;
 }
 
-.col-gap-8 {
+.gap-x-8 {
   grid-column-gap: 2rem;
   column-gap: 2rem;
 }
 
-.col-gap-10 {
+.gap-x-10 {
   grid-column-gap: 2.5rem;
   column-gap: 2.5rem;
 }
 
-.col-gap-12 {
+.gap-x-12 {
   grid-column-gap: 3rem;
   column-gap: 3rem;
 }
 
-.col-gap-16 {
+.gap-x-16 {
   grid-column-gap: 4rem;
   column-gap: 4rem;
 }
 
-.col-gap-20 {
+.gap-x-20 {
   grid-column-gap: 5rem;
   column-gap: 5rem;
 }
 
-.col-gap-24 {
+.gap-x-24 {
   grid-column-gap: 6rem;
   column-gap: 6rem;
 }
 
-.col-gap-32 {
+.gap-x-32 {
   grid-column-gap: 8rem;
   column-gap: 8rem;
 }
 
-.col-gap-40 {
+.gap-x-40 {
   grid-column-gap: 10rem;
   column-gap: 10rem;
 }
 
-.col-gap-48 {
+.gap-x-48 {
   grid-column-gap: 12rem;
   column-gap: 12rem;
 }
 
-.col-gap-56 {
+.gap-x-56 {
   grid-column-gap: 14rem;
   column-gap: 14rem;
 }
 
-.col-gap-64 {
+.gap-x-64 {
   grid-column-gap: 16rem;
   column-gap: 16rem;
 }
 
-.col-gap-px {
+.gap-x-px {
   grid-column-gap: 1px;
   column-gap: 1px;
 }
 
-.row-gap-0 {
+.gap-y-0 {
   grid-row-gap: 0;
   row-gap: 0;
 }
 
-.row-gap-1 {
+.gap-y-1 {
   grid-row-gap: 0.25rem;
   row-gap: 0.25rem;
 }
 
-.row-gap-2 {
+.gap-y-2 {
   grid-row-gap: 0.5rem;
   row-gap: 0.5rem;
 }
 
-.row-gap-3 {
+.gap-y-3 {
   grid-row-gap: 0.75rem;
   row-gap: 0.75rem;
 }
 
-.row-gap-4 {
+.gap-y-4 {
   grid-row-gap: 1rem;
   row-gap: 1rem;
 }
 
-.row-gap-5 {
+.gap-y-5 {
   grid-row-gap: 1.25rem;
   row-gap: 1.25rem;
 }
 
-.row-gap-6 {
+.gap-y-6 {
   grid-row-gap: 1.5rem;
   row-gap: 1.5rem;
 }
 
-.row-gap-8 {
+.gap-y-8 {
   grid-row-gap: 2rem;
   row-gap: 2rem;
 }
 
-.row-gap-10 {
+.gap-y-10 {
   grid-row-gap: 2.5rem;
   row-gap: 2.5rem;
 }
 
-.row-gap-12 {
+.gap-y-12 {
   grid-row-gap: 3rem;
   row-gap: 3rem;
 }
 
-.row-gap-16 {
+.gap-y-16 {
   grid-row-gap: 4rem;
   row-gap: 4rem;
 }
 
-.row-gap-20 {
+.gap-y-20 {
   grid-row-gap: 5rem;
   row-gap: 5rem;
 }
 
-.row-gap-24 {
+.gap-y-24 {
   grid-row-gap: 6rem;
   row-gap: 6rem;
 }
 
-.row-gap-32 {
+.gap-y-32 {
   grid-row-gap: 8rem;
   row-gap: 8rem;
 }
 
-.row-gap-40 {
+.gap-y-40 {
   grid-row-gap: 10rem;
   row-gap: 10rem;
 }
 
-.row-gap-48 {
+.gap-y-48 {
   grid-row-gap: 12rem;
   row-gap: 12rem;
 }
 
-.row-gap-56 {
+.gap-y-56 {
   grid-row-gap: 14rem;
   row-gap: 14rem;
 }
 
-.row-gap-64 {
+.gap-y-64 {
   grid-row-gap: 16rem;
   row-gap: 16rem;
 }
 
-.row-gap-px {
+.gap-y-px {
   grid-row-gap: 1px;
   row-gap: 1px;
 }
@@ -27350,192 +27350,192 @@ video {
     gap: 1px;
   }
 
-  .sm\:col-gap-0 {
+  .sm\:gap-x-0 {
     grid-column-gap: 0;
     column-gap: 0;
   }
 
-  .sm\:col-gap-1 {
+  .sm\:gap-x-1 {
     grid-column-gap: 0.25rem;
     column-gap: 0.25rem;
   }
 
-  .sm\:col-gap-2 {
+  .sm\:gap-x-2 {
     grid-column-gap: 0.5rem;
     column-gap: 0.5rem;
   }
 
-  .sm\:col-gap-3 {
+  .sm\:gap-x-3 {
     grid-column-gap: 0.75rem;
     column-gap: 0.75rem;
   }
 
-  .sm\:col-gap-4 {
+  .sm\:gap-x-4 {
     grid-column-gap: 1rem;
     column-gap: 1rem;
   }
 
-  .sm\:col-gap-5 {
+  .sm\:gap-x-5 {
     grid-column-gap: 1.25rem;
     column-gap: 1.25rem;
   }
 
-  .sm\:col-gap-6 {
+  .sm\:gap-x-6 {
     grid-column-gap: 1.5rem;
     column-gap: 1.5rem;
   }
 
-  .sm\:col-gap-8 {
+  .sm\:gap-x-8 {
     grid-column-gap: 2rem;
     column-gap: 2rem;
   }
 
-  .sm\:col-gap-10 {
+  .sm\:gap-x-10 {
     grid-column-gap: 2.5rem;
     column-gap: 2.5rem;
   }
 
-  .sm\:col-gap-12 {
+  .sm\:gap-x-12 {
     grid-column-gap: 3rem;
     column-gap: 3rem;
   }
 
-  .sm\:col-gap-16 {
+  .sm\:gap-x-16 {
     grid-column-gap: 4rem;
     column-gap: 4rem;
   }
 
-  .sm\:col-gap-20 {
+  .sm\:gap-x-20 {
     grid-column-gap: 5rem;
     column-gap: 5rem;
   }
 
-  .sm\:col-gap-24 {
+  .sm\:gap-x-24 {
     grid-column-gap: 6rem;
     column-gap: 6rem;
   }
 
-  .sm\:col-gap-32 {
+  .sm\:gap-x-32 {
     grid-column-gap: 8rem;
     column-gap: 8rem;
   }
 
-  .sm\:col-gap-40 {
+  .sm\:gap-x-40 {
     grid-column-gap: 10rem;
     column-gap: 10rem;
   }
 
-  .sm\:col-gap-48 {
+  .sm\:gap-x-48 {
     grid-column-gap: 12rem;
     column-gap: 12rem;
   }
 
-  .sm\:col-gap-56 {
+  .sm\:gap-x-56 {
     grid-column-gap: 14rem;
     column-gap: 14rem;
   }
 
-  .sm\:col-gap-64 {
+  .sm\:gap-x-64 {
     grid-column-gap: 16rem;
     column-gap: 16rem;
   }
 
-  .sm\:col-gap-px {
+  .sm\:gap-x-px {
     grid-column-gap: 1px;
     column-gap: 1px;
   }
 
-  .sm\:row-gap-0 {
+  .sm\:gap-y-0 {
     grid-row-gap: 0;
     row-gap: 0;
   }
 
-  .sm\:row-gap-1 {
+  .sm\:gap-y-1 {
     grid-row-gap: 0.25rem;
     row-gap: 0.25rem;
   }
 
-  .sm\:row-gap-2 {
+  .sm\:gap-y-2 {
     grid-row-gap: 0.5rem;
     row-gap: 0.5rem;
   }
 
-  .sm\:row-gap-3 {
+  .sm\:gap-y-3 {
     grid-row-gap: 0.75rem;
     row-gap: 0.75rem;
   }
 
-  .sm\:row-gap-4 {
+  .sm\:gap-y-4 {
     grid-row-gap: 1rem;
     row-gap: 1rem;
   }
 
-  .sm\:row-gap-5 {
+  .sm\:gap-y-5 {
     grid-row-gap: 1.25rem;
     row-gap: 1.25rem;
   }
 
-  .sm\:row-gap-6 {
+  .sm\:gap-y-6 {
     grid-row-gap: 1.5rem;
     row-gap: 1.5rem;
   }
 
-  .sm\:row-gap-8 {
+  .sm\:gap-y-8 {
     grid-row-gap: 2rem;
     row-gap: 2rem;
   }
 
-  .sm\:row-gap-10 {
+  .sm\:gap-y-10 {
     grid-row-gap: 2.5rem;
     row-gap: 2.5rem;
   }
 
-  .sm\:row-gap-12 {
+  .sm\:gap-y-12 {
     grid-row-gap: 3rem;
     row-gap: 3rem;
   }
 
-  .sm\:row-gap-16 {
+  .sm\:gap-y-16 {
     grid-row-gap: 4rem;
     row-gap: 4rem;
   }
 
-  .sm\:row-gap-20 {
+  .sm\:gap-y-20 {
     grid-row-gap: 5rem;
     row-gap: 5rem;
   }
 
-  .sm\:row-gap-24 {
+  .sm\:gap-y-24 {
     grid-row-gap: 6rem;
     row-gap: 6rem;
   }
 
-  .sm\:row-gap-32 {
+  .sm\:gap-y-32 {
     grid-row-gap: 8rem;
     row-gap: 8rem;
   }
 
-  .sm\:row-gap-40 {
+  .sm\:gap-y-40 {
     grid-row-gap: 10rem;
     row-gap: 10rem;
   }
 
-  .sm\:row-gap-48 {
+  .sm\:gap-y-48 {
     grid-row-gap: 12rem;
     row-gap: 12rem;
   }
 
-  .sm\:row-gap-56 {
+  .sm\:gap-y-56 {
     grid-row-gap: 14rem;
     row-gap: 14rem;
   }
 
-  .sm\:row-gap-64 {
+  .sm\:gap-y-64 {
     grid-row-gap: 16rem;
     row-gap: 16rem;
   }
 
-  .sm\:row-gap-px {
+  .sm\:gap-y-px {
     grid-row-gap: 1px;
     row-gap: 1px;
   }
@@ -41892,192 +41892,192 @@ video {
     gap: 1px;
   }
 
-  .md\:col-gap-0 {
+  .md\:gap-x-0 {
     grid-column-gap: 0;
     column-gap: 0;
   }
 
-  .md\:col-gap-1 {
+  .md\:gap-x-1 {
     grid-column-gap: 0.25rem;
     column-gap: 0.25rem;
   }
 
-  .md\:col-gap-2 {
+  .md\:gap-x-2 {
     grid-column-gap: 0.5rem;
     column-gap: 0.5rem;
   }
 
-  .md\:col-gap-3 {
+  .md\:gap-x-3 {
     grid-column-gap: 0.75rem;
     column-gap: 0.75rem;
   }
 
-  .md\:col-gap-4 {
+  .md\:gap-x-4 {
     grid-column-gap: 1rem;
     column-gap: 1rem;
   }
 
-  .md\:col-gap-5 {
+  .md\:gap-x-5 {
     grid-column-gap: 1.25rem;
     column-gap: 1.25rem;
   }
 
-  .md\:col-gap-6 {
+  .md\:gap-x-6 {
     grid-column-gap: 1.5rem;
     column-gap: 1.5rem;
   }
 
-  .md\:col-gap-8 {
+  .md\:gap-x-8 {
     grid-column-gap: 2rem;
     column-gap: 2rem;
   }
 
-  .md\:col-gap-10 {
+  .md\:gap-x-10 {
     grid-column-gap: 2.5rem;
     column-gap: 2.5rem;
   }
 
-  .md\:col-gap-12 {
+  .md\:gap-x-12 {
     grid-column-gap: 3rem;
     column-gap: 3rem;
   }
 
-  .md\:col-gap-16 {
+  .md\:gap-x-16 {
     grid-column-gap: 4rem;
     column-gap: 4rem;
   }
 
-  .md\:col-gap-20 {
+  .md\:gap-x-20 {
     grid-column-gap: 5rem;
     column-gap: 5rem;
   }
 
-  .md\:col-gap-24 {
+  .md\:gap-x-24 {
     grid-column-gap: 6rem;
     column-gap: 6rem;
   }
 
-  .md\:col-gap-32 {
+  .md\:gap-x-32 {
     grid-column-gap: 8rem;
     column-gap: 8rem;
   }
 
-  .md\:col-gap-40 {
+  .md\:gap-x-40 {
     grid-column-gap: 10rem;
     column-gap: 10rem;
   }
 
-  .md\:col-gap-48 {
+  .md\:gap-x-48 {
     grid-column-gap: 12rem;
     column-gap: 12rem;
   }
 
-  .md\:col-gap-56 {
+  .md\:gap-x-56 {
     grid-column-gap: 14rem;
     column-gap: 14rem;
   }
 
-  .md\:col-gap-64 {
+  .md\:gap-x-64 {
     grid-column-gap: 16rem;
     column-gap: 16rem;
   }
 
-  .md\:col-gap-px {
+  .md\:gap-x-px {
     grid-column-gap: 1px;
     column-gap: 1px;
   }
 
-  .md\:row-gap-0 {
+  .md\:gap-y-0 {
     grid-row-gap: 0;
     row-gap: 0;
   }
 
-  .md\:row-gap-1 {
+  .md\:gap-y-1 {
     grid-row-gap: 0.25rem;
     row-gap: 0.25rem;
   }
 
-  .md\:row-gap-2 {
+  .md\:gap-y-2 {
     grid-row-gap: 0.5rem;
     row-gap: 0.5rem;
   }
 
-  .md\:row-gap-3 {
+  .md\:gap-y-3 {
     grid-row-gap: 0.75rem;
     row-gap: 0.75rem;
   }
 
-  .md\:row-gap-4 {
+  .md\:gap-y-4 {
     grid-row-gap: 1rem;
     row-gap: 1rem;
   }
 
-  .md\:row-gap-5 {
+  .md\:gap-y-5 {
     grid-row-gap: 1.25rem;
     row-gap: 1.25rem;
   }
 
-  .md\:row-gap-6 {
+  .md\:gap-y-6 {
     grid-row-gap: 1.5rem;
     row-gap: 1.5rem;
   }
 
-  .md\:row-gap-8 {
+  .md\:gap-y-8 {
     grid-row-gap: 2rem;
     row-gap: 2rem;
   }
 
-  .md\:row-gap-10 {
+  .md\:gap-y-10 {
     grid-row-gap: 2.5rem;
     row-gap: 2.5rem;
   }
 
-  .md\:row-gap-12 {
+  .md\:gap-y-12 {
     grid-row-gap: 3rem;
     row-gap: 3rem;
   }
 
-  .md\:row-gap-16 {
+  .md\:gap-y-16 {
     grid-row-gap: 4rem;
     row-gap: 4rem;
   }
 
-  .md\:row-gap-20 {
+  .md\:gap-y-20 {
     grid-row-gap: 5rem;
     row-gap: 5rem;
   }
 
-  .md\:row-gap-24 {
+  .md\:gap-y-24 {
     grid-row-gap: 6rem;
     row-gap: 6rem;
   }
 
-  .md\:row-gap-32 {
+  .md\:gap-y-32 {
     grid-row-gap: 8rem;
     row-gap: 8rem;
   }
 
-  .md\:row-gap-40 {
+  .md\:gap-y-40 {
     grid-row-gap: 10rem;
     row-gap: 10rem;
   }
 
-  .md\:row-gap-48 {
+  .md\:gap-y-48 {
     grid-row-gap: 12rem;
     row-gap: 12rem;
   }
 
-  .md\:row-gap-56 {
+  .md\:gap-y-56 {
     grid-row-gap: 14rem;
     row-gap: 14rem;
   }
 
-  .md\:row-gap-64 {
+  .md\:gap-y-64 {
     grid-row-gap: 16rem;
     row-gap: 16rem;
   }
 
-  .md\:row-gap-px {
+  .md\:gap-y-px {
     grid-row-gap: 1px;
     row-gap: 1px;
   }
@@ -56434,192 +56434,192 @@ video {
     gap: 1px;
   }
 
-  .lg\:col-gap-0 {
+  .lg\:gap-x-0 {
     grid-column-gap: 0;
     column-gap: 0;
   }
 
-  .lg\:col-gap-1 {
+  .lg\:gap-x-1 {
     grid-column-gap: 0.25rem;
     column-gap: 0.25rem;
   }
 
-  .lg\:col-gap-2 {
+  .lg\:gap-x-2 {
     grid-column-gap: 0.5rem;
     column-gap: 0.5rem;
   }
 
-  .lg\:col-gap-3 {
+  .lg\:gap-x-3 {
     grid-column-gap: 0.75rem;
     column-gap: 0.75rem;
   }
 
-  .lg\:col-gap-4 {
+  .lg\:gap-x-4 {
     grid-column-gap: 1rem;
     column-gap: 1rem;
   }
 
-  .lg\:col-gap-5 {
+  .lg\:gap-x-5 {
     grid-column-gap: 1.25rem;
     column-gap: 1.25rem;
   }
 
-  .lg\:col-gap-6 {
+  .lg\:gap-x-6 {
     grid-column-gap: 1.5rem;
     column-gap: 1.5rem;
   }
 
-  .lg\:col-gap-8 {
+  .lg\:gap-x-8 {
     grid-column-gap: 2rem;
     column-gap: 2rem;
   }
 
-  .lg\:col-gap-10 {
+  .lg\:gap-x-10 {
     grid-column-gap: 2.5rem;
     column-gap: 2.5rem;
   }
 
-  .lg\:col-gap-12 {
+  .lg\:gap-x-12 {
     grid-column-gap: 3rem;
     column-gap: 3rem;
   }
 
-  .lg\:col-gap-16 {
+  .lg\:gap-x-16 {
     grid-column-gap: 4rem;
     column-gap: 4rem;
   }
 
-  .lg\:col-gap-20 {
+  .lg\:gap-x-20 {
     grid-column-gap: 5rem;
     column-gap: 5rem;
   }
 
-  .lg\:col-gap-24 {
+  .lg\:gap-x-24 {
     grid-column-gap: 6rem;
     column-gap: 6rem;
   }
 
-  .lg\:col-gap-32 {
+  .lg\:gap-x-32 {
     grid-column-gap: 8rem;
     column-gap: 8rem;
   }
 
-  .lg\:col-gap-40 {
+  .lg\:gap-x-40 {
     grid-column-gap: 10rem;
     column-gap: 10rem;
   }
 
-  .lg\:col-gap-48 {
+  .lg\:gap-x-48 {
     grid-column-gap: 12rem;
     column-gap: 12rem;
   }
 
-  .lg\:col-gap-56 {
+  .lg\:gap-x-56 {
     grid-column-gap: 14rem;
     column-gap: 14rem;
   }
 
-  .lg\:col-gap-64 {
+  .lg\:gap-x-64 {
     grid-column-gap: 16rem;
     column-gap: 16rem;
   }
 
-  .lg\:col-gap-px {
+  .lg\:gap-x-px {
     grid-column-gap: 1px;
     column-gap: 1px;
   }
 
-  .lg\:row-gap-0 {
+  .lg\:gap-y-0 {
     grid-row-gap: 0;
     row-gap: 0;
   }
 
-  .lg\:row-gap-1 {
+  .lg\:gap-y-1 {
     grid-row-gap: 0.25rem;
     row-gap: 0.25rem;
   }
 
-  .lg\:row-gap-2 {
+  .lg\:gap-y-2 {
     grid-row-gap: 0.5rem;
     row-gap: 0.5rem;
   }
 
-  .lg\:row-gap-3 {
+  .lg\:gap-y-3 {
     grid-row-gap: 0.75rem;
     row-gap: 0.75rem;
   }
 
-  .lg\:row-gap-4 {
+  .lg\:gap-y-4 {
     grid-row-gap: 1rem;
     row-gap: 1rem;
   }
 
-  .lg\:row-gap-5 {
+  .lg\:gap-y-5 {
     grid-row-gap: 1.25rem;
     row-gap: 1.25rem;
   }
 
-  .lg\:row-gap-6 {
+  .lg\:gap-y-6 {
     grid-row-gap: 1.5rem;
     row-gap: 1.5rem;
   }
 
-  .lg\:row-gap-8 {
+  .lg\:gap-y-8 {
     grid-row-gap: 2rem;
     row-gap: 2rem;
   }
 
-  .lg\:row-gap-10 {
+  .lg\:gap-y-10 {
     grid-row-gap: 2.5rem;
     row-gap: 2.5rem;
   }
 
-  .lg\:row-gap-12 {
+  .lg\:gap-y-12 {
     grid-row-gap: 3rem;
     row-gap: 3rem;
   }
 
-  .lg\:row-gap-16 {
+  .lg\:gap-y-16 {
     grid-row-gap: 4rem;
     row-gap: 4rem;
   }
 
-  .lg\:row-gap-20 {
+  .lg\:gap-y-20 {
     grid-row-gap: 5rem;
     row-gap: 5rem;
   }
 
-  .lg\:row-gap-24 {
+  .lg\:gap-y-24 {
     grid-row-gap: 6rem;
     row-gap: 6rem;
   }
 
-  .lg\:row-gap-32 {
+  .lg\:gap-y-32 {
     grid-row-gap: 8rem;
     row-gap: 8rem;
   }
 
-  .lg\:row-gap-40 {
+  .lg\:gap-y-40 {
     grid-row-gap: 10rem;
     row-gap: 10rem;
   }
 
-  .lg\:row-gap-48 {
+  .lg\:gap-y-48 {
     grid-row-gap: 12rem;
     row-gap: 12rem;
   }
 
-  .lg\:row-gap-56 {
+  .lg\:gap-y-56 {
     grid-row-gap: 14rem;
     row-gap: 14rem;
   }
 
-  .lg\:row-gap-64 {
+  .lg\:gap-y-64 {
     grid-row-gap: 16rem;
     row-gap: 16rem;
   }
 
-  .lg\:row-gap-px {
+  .lg\:gap-y-px {
     grid-row-gap: 1px;
     row-gap: 1px;
   }
@@ -70976,192 +70976,192 @@ video {
     gap: 1px;
   }
 
-  .xl\:col-gap-0 {
+  .xl\:gap-x-0 {
     grid-column-gap: 0;
     column-gap: 0;
   }
 
-  .xl\:col-gap-1 {
+  .xl\:gap-x-1 {
     grid-column-gap: 0.25rem;
     column-gap: 0.25rem;
   }
 
-  .xl\:col-gap-2 {
+  .xl\:gap-x-2 {
     grid-column-gap: 0.5rem;
     column-gap: 0.5rem;
   }
 
-  .xl\:col-gap-3 {
+  .xl\:gap-x-3 {
     grid-column-gap: 0.75rem;
     column-gap: 0.75rem;
   }
 
-  .xl\:col-gap-4 {
+  .xl\:gap-x-4 {
     grid-column-gap: 1rem;
     column-gap: 1rem;
   }
 
-  .xl\:col-gap-5 {
+  .xl\:gap-x-5 {
     grid-column-gap: 1.25rem;
     column-gap: 1.25rem;
   }
 
-  .xl\:col-gap-6 {
+  .xl\:gap-x-6 {
     grid-column-gap: 1.5rem;
     column-gap: 1.5rem;
   }
 
-  .xl\:col-gap-8 {
+  .xl\:gap-x-8 {
     grid-column-gap: 2rem;
     column-gap: 2rem;
   }
 
-  .xl\:col-gap-10 {
+  .xl\:gap-x-10 {
     grid-column-gap: 2.5rem;
     column-gap: 2.5rem;
   }
 
-  .xl\:col-gap-12 {
+  .xl\:gap-x-12 {
     grid-column-gap: 3rem;
     column-gap: 3rem;
   }
 
-  .xl\:col-gap-16 {
+  .xl\:gap-x-16 {
     grid-column-gap: 4rem;
     column-gap: 4rem;
   }
 
-  .xl\:col-gap-20 {
+  .xl\:gap-x-20 {
     grid-column-gap: 5rem;
     column-gap: 5rem;
   }
 
-  .xl\:col-gap-24 {
+  .xl\:gap-x-24 {
     grid-column-gap: 6rem;
     column-gap: 6rem;
   }
 
-  .xl\:col-gap-32 {
+  .xl\:gap-x-32 {
     grid-column-gap: 8rem;
     column-gap: 8rem;
   }
 
-  .xl\:col-gap-40 {
+  .xl\:gap-x-40 {
     grid-column-gap: 10rem;
     column-gap: 10rem;
   }
 
-  .xl\:col-gap-48 {
+  .xl\:gap-x-48 {
     grid-column-gap: 12rem;
     column-gap: 12rem;
   }
 
-  .xl\:col-gap-56 {
+  .xl\:gap-x-56 {
     grid-column-gap: 14rem;
     column-gap: 14rem;
   }
 
-  .xl\:col-gap-64 {
+  .xl\:gap-x-64 {
     grid-column-gap: 16rem;
     column-gap: 16rem;
   }
 
-  .xl\:col-gap-px {
+  .xl\:gap-x-px {
     grid-column-gap: 1px;
     column-gap: 1px;
   }
 
-  .xl\:row-gap-0 {
+  .xl\:gap-y-0 {
     grid-row-gap: 0;
     row-gap: 0;
   }
 
-  .xl\:row-gap-1 {
+  .xl\:gap-y-1 {
     grid-row-gap: 0.25rem;
     row-gap: 0.25rem;
   }
 
-  .xl\:row-gap-2 {
+  .xl\:gap-y-2 {
     grid-row-gap: 0.5rem;
     row-gap: 0.5rem;
   }
 
-  .xl\:row-gap-3 {
+  .xl\:gap-y-3 {
     grid-row-gap: 0.75rem;
     row-gap: 0.75rem;
   }
 
-  .xl\:row-gap-4 {
+  .xl\:gap-y-4 {
     grid-row-gap: 1rem;
     row-gap: 1rem;
   }
 
-  .xl\:row-gap-5 {
+  .xl\:gap-y-5 {
     grid-row-gap: 1.25rem;
     row-gap: 1.25rem;
   }
 
-  .xl\:row-gap-6 {
+  .xl\:gap-y-6 {
     grid-row-gap: 1.5rem;
     row-gap: 1.5rem;
   }
 
-  .xl\:row-gap-8 {
+  .xl\:gap-y-8 {
     grid-row-gap: 2rem;
     row-gap: 2rem;
   }
 
-  .xl\:row-gap-10 {
+  .xl\:gap-y-10 {
     grid-row-gap: 2.5rem;
     row-gap: 2.5rem;
   }
 
-  .xl\:row-gap-12 {
+  .xl\:gap-y-12 {
     grid-row-gap: 3rem;
     row-gap: 3rem;
   }
 
-  .xl\:row-gap-16 {
+  .xl\:gap-y-16 {
     grid-row-gap: 4rem;
     row-gap: 4rem;
   }
 
-  .xl\:row-gap-20 {
+  .xl\:gap-y-20 {
     grid-row-gap: 5rem;
     row-gap: 5rem;
   }
 
-  .xl\:row-gap-24 {
+  .xl\:gap-y-24 {
     grid-row-gap: 6rem;
     row-gap: 6rem;
   }
 
-  .xl\:row-gap-32 {
+  .xl\:gap-y-32 {
     grid-row-gap: 8rem;
     row-gap: 8rem;
   }
 
-  .xl\:row-gap-40 {
+  .xl\:gap-y-40 {
     grid-row-gap: 10rem;
     row-gap: 10rem;
   }
 
-  .xl\:row-gap-48 {
+  .xl\:gap-y-48 {
     grid-row-gap: 12rem;
     row-gap: 12rem;
   }
 
-  .xl\:row-gap-56 {
+  .xl\:gap-y-56 {
     grid-row-gap: 14rem;
     row-gap: 14rem;
   }
 
-  .xl\:row-gap-64 {
+  .xl\:gap-y-64 {
     grid-row-gap: 16rem;
     row-gap: 16rem;
   }
 
-  .xl\:row-gap-px {
+  .xl\:gap-y-px {
     grid-row-gap: 1px;
     row-gap: 1px;
   }
diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index 96dd0ef5..a2efec71 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -12140,6 +12140,101 @@ video {
   column-gap: 1px !important;
 }
 
+.gap-x-0 {
+  grid-column-gap: 0 !important;
+  column-gap: 0 !important;
+}
+
+.gap-x-1 {
+  grid-column-gap: 0.25rem !important;
+  column-gap: 0.25rem !important;
+}
+
+.gap-x-2 {
+  grid-column-gap: 0.5rem !important;
+  column-gap: 0.5rem !important;
+}
+
+.gap-x-3 {
+  grid-column-gap: 0.75rem !important;
+  column-gap: 0.75rem !important;
+}
+
+.gap-x-4 {
+  grid-column-gap: 1rem !important;
+  column-gap: 1rem !important;
+}
+
+.gap-x-5 {
+  grid-column-gap: 1.25rem !important;
+  column-gap: 1.25rem !important;
+}
+
+.gap-x-6 {
+  grid-column-gap: 1.5rem !important;
+  column-gap: 1.5rem !important;
+}
+
+.gap-x-8 {
+  grid-column-gap: 2rem !important;
+  column-gap: 2rem !important;
+}
+
+.gap-x-10 {
+  grid-column-gap: 2.5rem !important;
+  column-gap: 2.5rem !important;
+}
+
+.gap-x-12 {
+  grid-column-gap: 3rem !important;
+  column-gap: 3rem !important;
+}
+
+.gap-x-16 {
+  grid-column-gap: 4rem !important;
+  column-gap: 4rem !important;
+}
+
+.gap-x-20 {
+  grid-column-gap: 5rem !important;
+  column-gap: 5rem !important;
+}
+
+.gap-x-24 {
+  grid-column-gap: 6rem !important;
+  column-gap: 6rem !important;
+}
+
+.gap-x-32 {
+  grid-column-gap: 8rem !important;
+  column-gap: 8rem !important;
+}
+
+.gap-x-40 {
+  grid-column-gap: 10rem !important;
+  column-gap: 10rem !important;
+}
+
+.gap-x-48 {
+  grid-column-gap: 12rem !important;
+  column-gap: 12rem !important;
+}
+
+.gap-x-56 {
+  grid-column-gap: 14rem !important;
+  column-gap: 14rem !important;
+}
+
+.gap-x-64 {
+  grid-column-gap: 16rem !important;
+  column-gap: 16rem !important;
+}
+
+.gap-x-px {
+  grid-column-gap: 1px !important;
+  column-gap: 1px !important;
+}
+
 .row-gap-0 {
   grid-row-gap: 0 !important;
   row-gap: 0 !important;
@@ -12235,6 +12330,101 @@ video {
   row-gap: 1px !important;
 }
 
+.gap-y-0 {
+  grid-row-gap: 0 !important;
+  row-gap: 0 !important;
+}
+
+.gap-y-1 {
+  grid-row-gap: 0.25rem !important;
+  row-gap: 0.25rem !important;
+}
+
+.gap-y-2 {
+  grid-row-gap: 0.5rem !important;
+  row-gap: 0.5rem !important;
+}
+
+.gap-y-3 {
+  grid-row-gap: 0.75rem !important;
+  row-gap: 0.75rem !important;
+}
+
+.gap-y-4 {
+  grid-row-gap: 1rem !important;
+  row-gap: 1rem !important;
+}
+
+.gap-y-5 {
+  grid-row-gap: 1.25rem !important;
+  row-gap: 1.25rem !important;
+}
+
+.gap-y-6 {
+  grid-row-gap: 1.5rem !important;
+  row-gap: 1.5rem !important;
+}
+
+.gap-y-8 {
+  grid-row-gap: 2rem !important;
+  row-gap: 2rem !important;
+}
+
+.gap-y-10 {
+  grid-row-gap: 2.5rem !important;
+  row-gap: 2.5rem !important;
+}
+
+.gap-y-12 {
+  grid-row-gap: 3rem !important;
+  row-gap: 3rem !important;
+}
+
+.gap-y-16 {
+  grid-row-gap: 4rem !important;
+  row-gap: 4rem !important;
+}
+
+.gap-y-20 {
+  grid-row-gap: 5rem !important;
+  row-gap: 5rem !important;
+}
+
+.gap-y-24 {
+  grid-row-gap: 6rem !important;
+  row-gap: 6rem !important;
+}
+
+.gap-y-32 {
+  grid-row-gap: 8rem !important;
+  row-gap: 8rem !important;
+}
+
+.gap-y-40 {
+  grid-row-gap: 10rem !important;
+  row-gap: 10rem !important;
+}
+
+.gap-y-48 {
+  grid-row-gap: 12rem !important;
+  row-gap: 12rem !important;
+}
+
+.gap-y-56 {
+  grid-row-gap: 14rem !important;
+  row-gap: 14rem !important;
+}
+
+.gap-y-64 {
+  grid-row-gap: 16rem !important;
+  row-gap: 16rem !important;
+}
+
+.gap-y-px {
+  grid-row-gap: 1px !important;
+  row-gap: 1px !important;
+}
+
 .grid-flow-row {
   grid-auto-flow: row !important;
 }
@@ -26005,6 +26195,101 @@ video {
     column-gap: 1px !important;
   }
 
+  .sm\:gap-x-0 {
+    grid-column-gap: 0 !important;
+    column-gap: 0 !important;
+  }
+
+  .sm\:gap-x-1 {
+    grid-column-gap: 0.25rem !important;
+    column-gap: 0.25rem !important;
+  }
+
+  .sm\:gap-x-2 {
+    grid-column-gap: 0.5rem !important;
+    column-gap: 0.5rem !important;
+  }
+
+  .sm\:gap-x-3 {
+    grid-column-gap: 0.75rem !important;
+    column-gap: 0.75rem !important;
+  }
+
+  .sm\:gap-x-4 {
+    grid-column-gap: 1rem !important;
+    column-gap: 1rem !important;
+  }
+
+  .sm\:gap-x-5 {
+    grid-column-gap: 1.25rem !important;
+    column-gap: 1.25rem !important;
+  }
+
+  .sm\:gap-x-6 {
+    grid-column-gap: 1.5rem !important;
+    column-gap: 1.5rem !important;
+  }
+
+  .sm\:gap-x-8 {
+    grid-column-gap: 2rem !important;
+    column-gap: 2rem !important;
+  }
+
+  .sm\:gap-x-10 {
+    grid-column-gap: 2.5rem !important;
+    column-gap: 2.5rem !important;
+  }
+
+  .sm\:gap-x-12 {
+    grid-column-gap: 3rem !important;
+    column-gap: 3rem !important;
+  }
+
+  .sm\:gap-x-16 {
+    grid-column-gap: 4rem !important;
+    column-gap: 4rem !important;
+  }
+
+  .sm\:gap-x-20 {
+    grid-column-gap: 5rem !important;
+    column-gap: 5rem !important;
+  }
+
+  .sm\:gap-x-24 {
+    grid-column-gap: 6rem !important;
+    column-gap: 6rem !important;
+  }
+
+  .sm\:gap-x-32 {
+    grid-column-gap: 8rem !important;
+    column-gap: 8rem !important;
+  }
+
+  .sm\:gap-x-40 {
+    grid-column-gap: 10rem !important;
+    column-gap: 10rem !important;
+  }
+
+  .sm\:gap-x-48 {
+    grid-column-gap: 12rem !important;
+    column-gap: 12rem !important;
+  }
+
+  .sm\:gap-x-56 {
+    grid-column-gap: 14rem !important;
+    column-gap: 14rem !important;
+  }
+
+  .sm\:gap-x-64 {
+    grid-column-gap: 16rem !important;
+    column-gap: 16rem !important;
+  }
+
+  .sm\:gap-x-px {
+    grid-column-gap: 1px !important;
+    column-gap: 1px !important;
+  }
+
   .sm\:row-gap-0 {
     grid-row-gap: 0 !important;
     row-gap: 0 !important;
@@ -26100,6 +26385,101 @@ video {
     row-gap: 1px !important;
   }
 
+  .sm\:gap-y-0 {
+    grid-row-gap: 0 !important;
+    row-gap: 0 !important;
+  }
+
+  .sm\:gap-y-1 {
+    grid-row-gap: 0.25rem !important;
+    row-gap: 0.25rem !important;
+  }
+
+  .sm\:gap-y-2 {
+    grid-row-gap: 0.5rem !important;
+    row-gap: 0.5rem !important;
+  }
+
+  .sm\:gap-y-3 {
+    grid-row-gap: 0.75rem !important;
+    row-gap: 0.75rem !important;
+  }
+
+  .sm\:gap-y-4 {
+    grid-row-gap: 1rem !important;
+    row-gap: 1rem !important;
+  }
+
+  .sm\:gap-y-5 {
+    grid-row-gap: 1.25rem !important;
+    row-gap: 1.25rem !important;
+  }
+
+  .sm\:gap-y-6 {
+    grid-row-gap: 1.5rem !important;
+    row-gap: 1.5rem !important;
+  }
+
+  .sm\:gap-y-8 {
+    grid-row-gap: 2rem !important;
+    row-gap: 2rem !important;
+  }
+
+  .sm\:gap-y-10 {
+    grid-row-gap: 2.5rem !important;
+    row-gap: 2.5rem !important;
+  }
+
+  .sm\:gap-y-12 {
+    grid-row-gap: 3rem !important;
+    row-gap: 3rem !important;
+  }
+
+  .sm\:gap-y-16 {
+    grid-row-gap: 4rem !important;
+    row-gap: 4rem !important;
+  }
+
+  .sm\:gap-y-20 {
+    grid-row-gap: 5rem !important;
+    row-gap: 5rem !important;
+  }
+
+  .sm\:gap-y-24 {
+    grid-row-gap: 6rem !important;
+    row-gap: 6rem !important;
+  }
+
+  .sm\:gap-y-32 {
+    grid-row-gap: 8rem !important;
+    row-gap: 8rem !important;
+  }
+
+  .sm\:gap-y-40 {
+    grid-row-gap: 10rem !important;
+    row-gap: 10rem !important;
+  }
+
+  .sm\:gap-y-48 {
+    grid-row-gap: 12rem !important;
+    row-gap: 12rem !important;
+  }
+
+  .sm\:gap-y-56 {
+    grid-row-gap: 14rem !important;
+    row-gap: 14rem !important;
+  }
+
+  .sm\:gap-y-64 {
+    grid-row-gap: 16rem !important;
+    row-gap: 16rem !important;
+  }
+
+  .sm\:gap-y-px {
+    grid-row-gap: 1px !important;
+    row-gap: 1px !important;
+  }
+
   .sm\:grid-flow-row {
     grid-auto-flow: row !important;
   }
@@ -39827,6 +40207,101 @@ video {
     column-gap: 1px !important;
   }
 
+  .md\:gap-x-0 {
+    grid-column-gap: 0 !important;
+    column-gap: 0 !important;
+  }
+
+  .md\:gap-x-1 {
+    grid-column-gap: 0.25rem !important;
+    column-gap: 0.25rem !important;
+  }
+
+  .md\:gap-x-2 {
+    grid-column-gap: 0.5rem !important;
+    column-gap: 0.5rem !important;
+  }
+
+  .md\:gap-x-3 {
+    grid-column-gap: 0.75rem !important;
+    column-gap: 0.75rem !important;
+  }
+
+  .md\:gap-x-4 {
+    grid-column-gap: 1rem !important;
+    column-gap: 1rem !important;
+  }
+
+  .md\:gap-x-5 {
+    grid-column-gap: 1.25rem !important;
+    column-gap: 1.25rem !important;
+  }
+
+  .md\:gap-x-6 {
+    grid-column-gap: 1.5rem !important;
+    column-gap: 1.5rem !important;
+  }
+
+  .md\:gap-x-8 {
+    grid-column-gap: 2rem !important;
+    column-gap: 2rem !important;
+  }
+
+  .md\:gap-x-10 {
+    grid-column-gap: 2.5rem !important;
+    column-gap: 2.5rem !important;
+  }
+
+  .md\:gap-x-12 {
+    grid-column-gap: 3rem !important;
+    column-gap: 3rem !important;
+  }
+
+  .md\:gap-x-16 {
+    grid-column-gap: 4rem !important;
+    column-gap: 4rem !important;
+  }
+
+  .md\:gap-x-20 {
+    grid-column-gap: 5rem !important;
+    column-gap: 5rem !important;
+  }
+
+  .md\:gap-x-24 {
+    grid-column-gap: 6rem !important;
+    column-gap: 6rem !important;
+  }
+
+  .md\:gap-x-32 {
+    grid-column-gap: 8rem !important;
+    column-gap: 8rem !important;
+  }
+
+  .md\:gap-x-40 {
+    grid-column-gap: 10rem !important;
+    column-gap: 10rem !important;
+  }
+
+  .md\:gap-x-48 {
+    grid-column-gap: 12rem !important;
+    column-gap: 12rem !important;
+  }
+
+  .md\:gap-x-56 {
+    grid-column-gap: 14rem !important;
+    column-gap: 14rem !important;
+  }
+
+  .md\:gap-x-64 {
+    grid-column-gap: 16rem !important;
+    column-gap: 16rem !important;
+  }
+
+  .md\:gap-x-px {
+    grid-column-gap: 1px !important;
+    column-gap: 1px !important;
+  }
+
   .md\:row-gap-0 {
     grid-row-gap: 0 !important;
     row-gap: 0 !important;
@@ -39922,6 +40397,101 @@ video {
     row-gap: 1px !important;
   }
 
+  .md\:gap-y-0 {
+    grid-row-gap: 0 !important;
+    row-gap: 0 !important;
+  }
+
+  .md\:gap-y-1 {
+    grid-row-gap: 0.25rem !important;
+    row-gap: 0.25rem !important;
+  }
+
+  .md\:gap-y-2 {
+    grid-row-gap: 0.5rem !important;
+    row-gap: 0.5rem !important;
+  }
+
+  .md\:gap-y-3 {
+    grid-row-gap: 0.75rem !important;
+    row-gap: 0.75rem !important;
+  }
+
+  .md\:gap-y-4 {
+    grid-row-gap: 1rem !important;
+    row-gap: 1rem !important;
+  }
+
+  .md\:gap-y-5 {
+    grid-row-gap: 1.25rem !important;
+    row-gap: 1.25rem !important;
+  }
+
+  .md\:gap-y-6 {
+    grid-row-gap: 1.5rem !important;
+    row-gap: 1.5rem !important;
+  }
+
+  .md\:gap-y-8 {
+    grid-row-gap: 2rem !important;
+    row-gap: 2rem !important;
+  }
+
+  .md\:gap-y-10 {
+    grid-row-gap: 2.5rem !important;
+    row-gap: 2.5rem !important;
+  }
+
+  .md\:gap-y-12 {
+    grid-row-gap: 3rem !important;
+    row-gap: 3rem !important;
+  }
+
+  .md\:gap-y-16 {
+    grid-row-gap: 4rem !important;
+    row-gap: 4rem !important;
+  }
+
+  .md\:gap-y-20 {
+    grid-row-gap: 5rem !important;
+    row-gap: 5rem !important;
+  }
+
+  .md\:gap-y-24 {
+    grid-row-gap: 6rem !important;
+    row-gap: 6rem !important;
+  }
+
+  .md\:gap-y-32 {
+    grid-row-gap: 8rem !important;
+    row-gap: 8rem !important;
+  }
+
+  .md\:gap-y-40 {
+    grid-row-gap: 10rem !important;
+    row-gap: 10rem !important;
+  }
+
+  .md\:gap-y-48 {
+    grid-row-gap: 12rem !important;
+    row-gap: 12rem !important;
+  }
+
+  .md\:gap-y-56 {
+    grid-row-gap: 14rem !important;
+    row-gap: 14rem !important;
+  }
+
+  .md\:gap-y-64 {
+    grid-row-gap: 16rem !important;
+    row-gap: 16rem !important;
+  }
+
+  .md\:gap-y-px {
+    grid-row-gap: 1px !important;
+    row-gap: 1px !important;
+  }
+
   .md\:grid-flow-row {
     grid-auto-flow: row !important;
   }
@@ -53649,6 +54219,101 @@ video {
     column-gap: 1px !important;
   }
 
+  .lg\:gap-x-0 {
+    grid-column-gap: 0 !important;
+    column-gap: 0 !important;
+  }
+
+  .lg\:gap-x-1 {
+    grid-column-gap: 0.25rem !important;
+    column-gap: 0.25rem !important;
+  }
+
+  .lg\:gap-x-2 {
+    grid-column-gap: 0.5rem !important;
+    column-gap: 0.5rem !important;
+  }
+
+  .lg\:gap-x-3 {
+    grid-column-gap: 0.75rem !important;
+    column-gap: 0.75rem !important;
+  }
+
+  .lg\:gap-x-4 {
+    grid-column-gap: 1rem !important;
+    column-gap: 1rem !important;
+  }
+
+  .lg\:gap-x-5 {
+    grid-column-gap: 1.25rem !important;
+    column-gap: 1.25rem !important;
+  }
+
+  .lg\:gap-x-6 {
+    grid-column-gap: 1.5rem !important;
+    column-gap: 1.5rem !important;
+  }
+
+  .lg\:gap-x-8 {
+    grid-column-gap: 2rem !important;
+    column-gap: 2rem !important;
+  }
+
+  .lg\:gap-x-10 {
+    grid-column-gap: 2.5rem !important;
+    column-gap: 2.5rem !important;
+  }
+
+  .lg\:gap-x-12 {
+    grid-column-gap: 3rem !important;
+    column-gap: 3rem !important;
+  }
+
+  .lg\:gap-x-16 {
+    grid-column-gap: 4rem !important;
+    column-gap: 4rem !important;
+  }
+
+  .lg\:gap-x-20 {
+    grid-column-gap: 5rem !important;
+    column-gap: 5rem !important;
+  }
+
+  .lg\:gap-x-24 {
+    grid-column-gap: 6rem !important;
+    column-gap: 6rem !important;
+  }
+
+  .lg\:gap-x-32 {
+    grid-column-gap: 8rem !important;
+    column-gap: 8rem !important;
+  }
+
+  .lg\:gap-x-40 {
+    grid-column-gap: 10rem !important;
+    column-gap: 10rem !important;
+  }
+
+  .lg\:gap-x-48 {
+    grid-column-gap: 12rem !important;
+    column-gap: 12rem !important;
+  }
+
+  .lg\:gap-x-56 {
+    grid-column-gap: 14rem !important;
+    column-gap: 14rem !important;
+  }
+
+  .lg\:gap-x-64 {
+    grid-column-gap: 16rem !important;
+    column-gap: 16rem !important;
+  }
+
+  .lg\:gap-x-px {
+    grid-column-gap: 1px !important;
+    column-gap: 1px !important;
+  }
+
   .lg\:row-gap-0 {
     grid-row-gap: 0 !important;
     row-gap: 0 !important;
@@ -53744,6 +54409,101 @@ video {
     row-gap: 1px !important;
   }
 
+  .lg\:gap-y-0 {
+    grid-row-gap: 0 !important;
+    row-gap: 0 !important;
+  }
+
+  .lg\:gap-y-1 {
+    grid-row-gap: 0.25rem !important;
+    row-gap: 0.25rem !important;
+  }
+
+  .lg\:gap-y-2 {
+    grid-row-gap: 0.5rem !important;
+    row-gap: 0.5rem !important;
+  }
+
+  .lg\:gap-y-3 {
+    grid-row-gap: 0.75rem !important;
+    row-gap: 0.75rem !important;
+  }
+
+  .lg\:gap-y-4 {
+    grid-row-gap: 1rem !important;
+    row-gap: 1rem !important;
+  }
+
+  .lg\:gap-y-5 {
+    grid-row-gap: 1.25rem !important;
+    row-gap: 1.25rem !important;
+  }
+
+  .lg\:gap-y-6 {
+    grid-row-gap: 1.5rem !important;
+    row-gap: 1.5rem !important;
+  }
+
+  .lg\:gap-y-8 {
+    grid-row-gap: 2rem !important;
+    row-gap: 2rem !important;
+  }
+
+  .lg\:gap-y-10 {
+    grid-row-gap: 2.5rem !important;
+    row-gap: 2.5rem !important;
+  }
+
+  .lg\:gap-y-12 {
+    grid-row-gap: 3rem !important;
+    row-gap: 3rem !important;
+  }
+
+  .lg\:gap-y-16 {
+    grid-row-gap: 4rem !important;
+    row-gap: 4rem !important;
+  }
+
+  .lg\:gap-y-20 {
+    grid-row-gap: 5rem !important;
+    row-gap: 5rem !important;
+  }
+
+  .lg\:gap-y-24 {
+    grid-row-gap: 6rem !important;
+    row-gap: 6rem !important;
+  }
+
+  .lg\:gap-y-32 {
+    grid-row-gap: 8rem !important;
+    row-gap: 8rem !important;
+  }
+
+  .lg\:gap-y-40 {
+    grid-row-gap: 10rem !important;
+    row-gap: 10rem !important;
+  }
+
+  .lg\:gap-y-48 {
+    grid-row-gap: 12rem !important;
+    row-gap: 12rem !important;
+  }
+
+  .lg\:gap-y-56 {
+    grid-row-gap: 14rem !important;
+    row-gap: 14rem !important;
+  }
+
+  .lg\:gap-y-64 {
+    grid-row-gap: 16rem !important;
+    row-gap: 16rem !important;
+  }
+
+  .lg\:gap-y-px {
+    grid-row-gap: 1px !important;
+    row-gap: 1px !important;
+  }
+
   .lg\:grid-flow-row {
     grid-auto-flow: row !important;
   }
@@ -67471,6 +68231,101 @@ video {
     column-gap: 1px !important;
   }
 
+  .xl\:gap-x-0 {
+    grid-column-gap: 0 !important;
+    column-gap: 0 !important;
+  }
+
+  .xl\:gap-x-1 {
+    grid-column-gap: 0.25rem !important;
+    column-gap: 0.25rem !important;
+  }
+
+  .xl\:gap-x-2 {
+    grid-column-gap: 0.5rem !important;
+    column-gap: 0.5rem !important;
+  }
+
+  .xl\:gap-x-3 {
+    grid-column-gap: 0.75rem !important;
+    column-gap: 0.75rem !important;
+  }
+
+  .xl\:gap-x-4 {
+    grid-column-gap: 1rem !important;
+    column-gap: 1rem !important;
+  }
+
+  .xl\:gap-x-5 {
+    grid-column-gap: 1.25rem !important;
+    column-gap: 1.25rem !important;
+  }
+
+  .xl\:gap-x-6 {
+    grid-column-gap: 1.5rem !important;
+    column-gap: 1.5rem !important;
+  }
+
+  .xl\:gap-x-8 {
+    grid-column-gap: 2rem !important;
+    column-gap: 2rem !important;
+  }
+
+  .xl\:gap-x-10 {
+    grid-column-gap: 2.5rem !important;
+    column-gap: 2.5rem !important;
+  }
+
+  .xl\:gap-x-12 {
+    grid-column-gap: 3rem !important;
+    column-gap: 3rem !important;
+  }
+
+  .xl\:gap-x-16 {
+    grid-column-gap: 4rem !important;
+    column-gap: 4rem !important;
+  }
+
+  .xl\:gap-x-20 {
+    grid-column-gap: 5rem !important;
+    column-gap: 5rem !important;
+  }
+
+  .xl\:gap-x-24 {
+    grid-column-gap: 6rem !important;
+    column-gap: 6rem !important;
+  }
+
+  .xl\:gap-x-32 {
+    grid-column-gap: 8rem !important;
+    column-gap: 8rem !important;
+  }
+
+  .xl\:gap-x-40 {
+    grid-column-gap: 10rem !important;
+    column-gap: 10rem !important;
+  }
+
+  .xl\:gap-x-48 {
+    grid-column-gap: 12rem !important;
+    column-gap: 12rem !important;
+  }
+
+  .xl\:gap-x-56 {
+    grid-column-gap: 14rem !important;
+    column-gap: 14rem !important;
+  }
+
+  .xl\:gap-x-64 {
+    grid-column-gap: 16rem !important;
+    column-gap: 16rem !important;
+  }
+
+  .xl\:gap-x-px {
+    grid-column-gap: 1px !important;
+    column-gap: 1px !important;
+  }
+
   .xl\:row-gap-0 {
     grid-row-gap: 0 !important;
     row-gap: 0 !important;
@@ -67566,6 +68421,101 @@ video {
     row-gap: 1px !important;
   }
 
+  .xl\:gap-y-0 {
+    grid-row-gap: 0 !important;
+    row-gap: 0 !important;
+  }
+
+  .xl\:gap-y-1 {
+    grid-row-gap: 0.25rem !important;
+    row-gap: 0.25rem !important;
+  }
+
+  .xl\:gap-y-2 {
+    grid-row-gap: 0.5rem !important;
+    row-gap: 0.5rem !important;
+  }
+
+  .xl\:gap-y-3 {
+    grid-row-gap: 0.75rem !important;
+    row-gap: 0.75rem !important;
+  }
+
+  .xl\:gap-y-4 {
+    grid-row-gap: 1rem !important;
+    row-gap: 1rem !important;
+  }
+
+  .xl\:gap-y-5 {
+    grid-row-gap: 1.25rem !important;
+    row-gap: 1.25rem !important;
+  }
+
+  .xl\:gap-y-6 {
+    grid-row-gap: 1.5rem !important;
+    row-gap: 1.5rem !important;
+  }
+
+  .xl\:gap-y-8 {
+    grid-row-gap: 2rem !important;
+    row-gap: 2rem !important;
+  }
+
+  .xl\:gap-y-10 {
+    grid-row-gap: 2.5rem !important;
+    row-gap: 2.5rem !important;
+  }
+
+  .xl\:gap-y-12 {
+    grid-row-gap: 3rem !important;
+    row-gap: 3rem !important;
+  }
+
+  .xl\:gap-y-16 {
+    grid-row-gap: 4rem !important;
+    row-gap: 4rem !important;
+  }
+
+  .xl\:gap-y-20 {
+    grid-row-gap: 5rem !important;
+    row-gap: 5rem !important;
+  }
+
+  .xl\:gap-y-24 {
+    grid-row-gap: 6rem !important;
+    row-gap: 6rem !important;
+  }
+
+  .xl\:gap-y-32 {
+    grid-row-gap: 8rem !important;
+    row-gap: 8rem !important;
+  }
+
+  .xl\:gap-y-40 {
+    grid-row-gap: 10rem !important;
+    row-gap: 10rem !important;
+  }
+
+  .xl\:gap-y-48 {
+    grid-row-gap: 12rem !important;
+    row-gap: 12rem !important;
+  }
+
+  .xl\:gap-y-56 {
+    grid-row-gap: 14rem !important;
+    row-gap: 14rem !important;
+  }
+
+  .xl\:gap-y-64 {
+    grid-row-gap: 16rem !important;
+    row-gap: 16rem !important;
+  }
+
+  .xl\:gap-y-px {
+    grid-row-gap: 1px !important;
+    row-gap: 1px !important;
+  }
+
   .xl\:grid-flow-row {
     grid-auto-flow: row !important;
   }
diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css
index 0d481f19..53e4b780 100644
--- a/__tests__/fixtures/tailwind-output-no-color-opacity.css
+++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css
@@ -9692,6 +9692,101 @@ video {
   column-gap: 1px;
 }
 
+.gap-x-0 {
+  grid-column-gap: 0;
+  column-gap: 0;
+}
+
+.gap-x-1 {
+  grid-column-gap: 0.25rem;
+  column-gap: 0.25rem;
+}
+
+.gap-x-2 {
+  grid-column-gap: 0.5rem;
+  column-gap: 0.5rem;
+}
+
+.gap-x-3 {
+  grid-column-gap: 0.75rem;
+  column-gap: 0.75rem;
+}
+
+.gap-x-4 {
+  grid-column-gap: 1rem;
+  column-gap: 1rem;
+}
+
+.gap-x-5 {
+  grid-column-gap: 1.25rem;
+  column-gap: 1.25rem;
+}
+
+.gap-x-6 {
+  grid-column-gap: 1.5rem;
+  column-gap: 1.5rem;
+}
+
+.gap-x-8 {
+  grid-column-gap: 2rem;
+  column-gap: 2rem;
+}
+
+.gap-x-10 {
+  grid-column-gap: 2.5rem;
+  column-gap: 2.5rem;
+}
+
+.gap-x-12 {
+  grid-column-gap: 3rem;
+  column-gap: 3rem;
+}
+
+.gap-x-16 {
+  grid-column-gap: 4rem;
+  column-gap: 4rem;
+}
+
+.gap-x-20 {
+  grid-column-gap: 5rem;
+  column-gap: 5rem;
+}
+
+.gap-x-24 {
+  grid-column-gap: 6rem;
+  column-gap: 6rem;
+}
+
+.gap-x-32 {
+  grid-column-gap: 8rem;
+  column-gap: 8rem;
+}
+
+.gap-x-40 {
+  grid-column-gap: 10rem;
+  column-gap: 10rem;
+}
+
+.gap-x-48 {
+  grid-column-gap: 12rem;
+  column-gap: 12rem;
+}
+
+.gap-x-56 {
+  grid-column-gap: 14rem;
+  column-gap: 14rem;
+}
+
+.gap-x-64 {
+  grid-column-gap: 16rem;
+  column-gap: 16rem;
+}
+
+.gap-x-px {
+  grid-column-gap: 1px;
+  column-gap: 1px;
+}
+
 .row-gap-0 {
   grid-row-gap: 0;
   row-gap: 0;
@@ -9787,6 +9882,101 @@ video {
   row-gap: 1px;
 }
 
+.gap-y-0 {
+  grid-row-gap: 0;
+  row-gap: 0;
+}
+
+.gap-y-1 {
+  grid-row-gap: 0.25rem;
+  row-gap: 0.25rem;
+}
+
+.gap-y-2 {
+  grid-row-gap: 0.5rem;
+  row-gap: 0.5rem;
+}
+
+.gap-y-3 {
+  grid-row-gap: 0.75rem;
+  row-gap: 0.75rem;
+}
+
+.gap-y-4 {
+  grid-row-gap: 1rem;
+  row-gap: 1rem;
+}
+
+.gap-y-5 {
+  grid-row-gap: 1.25rem;
+  row-gap: 1.25rem;
+}
+
+.gap-y-6 {
+  grid-row-gap: 1.5rem;
+  row-gap: 1.5rem;
+}
+
+.gap-y-8 {
+  grid-row-gap: 2rem;
+  row-gap: 2rem;
+}
+
+.gap-y-10 {
+  grid-row-gap: 2.5rem;
+  row-gap: 2.5rem;
+}
+
+.gap-y-12 {
+  grid-row-gap: 3rem;
+  row-gap: 3rem;
+}
+
+.gap-y-16 {
+  grid-row-gap: 4rem;
+  row-gap: 4rem;
+}
+
+.gap-y-20 {
+  grid-row-gap: 5rem;
+  row-gap: 5rem;
+}
+
+.gap-y-24 {
+  grid-row-gap: 6rem;
+  row-gap: 6rem;
+}
+
+.gap-y-32 {
+  grid-row-gap: 8rem;
+  row-gap: 8rem;
+}
+
+.gap-y-40 {
+  grid-row-gap: 10rem;
+  row-gap: 10rem;
+}
+
+.gap-y-48 {
+  grid-row-gap: 12rem;
+  row-gap: 12rem;
+}
+
+.gap-y-56 {
+  grid-row-gap: 14rem;
+  row-gap: 14rem;
+}
+
+.gap-y-64 {
+  grid-row-gap: 16rem;
+  row-gap: 16rem;
+}
+
+.gap-y-px {
+  grid-row-gap: 1px;
+  row-gap: 1px;
+}
+
 .grid-flow-row {
   grid-auto-flow: row;
 }
@@ -21109,6 +21299,101 @@ video {
     column-gap: 1px;
   }
 
+  .sm\:gap-x-0 {
+    grid-column-gap: 0;
+    column-gap: 0;
+  }
+
+  .sm\:gap-x-1 {
+    grid-column-gap: 0.25rem;
+    column-gap: 0.25rem;
+  }
+
+  .sm\:gap-x-2 {
+    grid-column-gap: 0.5rem;
+    column-gap: 0.5rem;
+  }
+
+  .sm\:gap-x-3 {
+    grid-column-gap: 0.75rem;
+    column-gap: 0.75rem;
+  }
+
+  .sm\:gap-x-4 {
+    grid-column-gap: 1rem;
+    column-gap: 1rem;
+  }
+
+  .sm\:gap-x-5 {
+    grid-column-gap: 1.25rem;
+    column-gap: 1.25rem;
+  }
+
+  .sm\:gap-x-6 {
+    grid-column-gap: 1.5rem;
+    column-gap: 1.5rem;
+  }
+
+  .sm\:gap-x-8 {
+    grid-column-gap: 2rem;
+    column-gap: 2rem;
+  }
+
+  .sm\:gap-x-10 {
+    grid-column-gap: 2.5rem;
+    column-gap: 2.5rem;
+  }
+
+  .sm\:gap-x-12 {
+    grid-column-gap: 3rem;
+    column-gap: 3rem;
+  }
+
+  .sm\:gap-x-16 {
+    grid-column-gap: 4rem;
+    column-gap: 4rem;
+  }
+
+  .sm\:gap-x-20 {
+    grid-column-gap: 5rem;
+    column-gap: 5rem;
+  }
+
+  .sm\:gap-x-24 {
+    grid-column-gap: 6rem;
+    column-gap: 6rem;
+  }
+
+  .sm\:gap-x-32 {
+    grid-column-gap: 8rem;
+    column-gap: 8rem;
+  }
+
+  .sm\:gap-x-40 {
+    grid-column-gap: 10rem;
+    column-gap: 10rem;
+  }
+
+  .sm\:gap-x-48 {
+    grid-column-gap: 12rem;
+    column-gap: 12rem;
+  }
+
+  .sm\:gap-x-56 {
+    grid-column-gap: 14rem;
+    column-gap: 14rem;
+  }
+
+  .sm\:gap-x-64 {
+    grid-column-gap: 16rem;
+    column-gap: 16rem;
+  }
+
+  .sm\:gap-x-px {
+    grid-column-gap: 1px;
+    column-gap: 1px;
+  }
+
   .sm\:row-gap-0 {
     grid-row-gap: 0;
     row-gap: 0;
@@ -21204,6 +21489,101 @@ video {
     row-gap: 1px;
   }
 
+  .sm\:gap-y-0 {
+    grid-row-gap: 0;
+    row-gap: 0;
+  }
+
+  .sm\:gap-y-1 {
+    grid-row-gap: 0.25rem;
+    row-gap: 0.25rem;
+  }
+
+  .sm\:gap-y-2 {
+    grid-row-gap: 0.5rem;
+    row-gap: 0.5rem;
+  }
+
+  .sm\:gap-y-3 {
+    grid-row-gap: 0.75rem;
+    row-gap: 0.75rem;
+  }
+
+  .sm\:gap-y-4 {
+    grid-row-gap: 1rem;
+    row-gap: 1rem;
+  }
+
+  .sm\:gap-y-5 {
+    grid-row-gap: 1.25rem;
+    row-gap: 1.25rem;
+  }
+
+  .sm\:gap-y-6 {
+    grid-row-gap: 1.5rem;
+    row-gap: 1.5rem;
+  }
+
+  .sm\:gap-y-8 {
+    grid-row-gap: 2rem;
+    row-gap: 2rem;
+  }
+
+  .sm\:gap-y-10 {
+    grid-row-gap: 2.5rem;
+    row-gap: 2.5rem;
+  }
+
+  .sm\:gap-y-12 {
+    grid-row-gap: 3rem;
+    row-gap: 3rem;
+  }
+
+  .sm\:gap-y-16 {
+    grid-row-gap: 4rem;
+    row-gap: 4rem;
+  }
+
+  .sm\:gap-y-20 {
+    grid-row-gap: 5rem;
+    row-gap: 5rem;
+  }
+
+  .sm\:gap-y-24 {
+    grid-row-gap: 6rem;
+    row-gap: 6rem;
+  }
+
+  .sm\:gap-y-32 {
+    grid-row-gap: 8rem;
+    row-gap: 8rem;
+  }
+
+  .sm\:gap-y-40 {
+    grid-row-gap: 10rem;
+    row-gap: 10rem;
+  }
+
+  .sm\:gap-y-48 {
+    grid-row-gap: 12rem;
+    row-gap: 12rem;
+  }
+
+  .sm\:gap-y-56 {
+    grid-row-gap: 14rem;
+    row-gap: 14rem;
+  }
+
+  .sm\:gap-y-64 {
+    grid-row-gap: 16rem;
+    row-gap: 16rem;
+  }
+
+  .sm\:gap-y-px {
+    grid-row-gap: 1px;
+    row-gap: 1px;
+  }
+
   .sm\:grid-flow-row {
     grid-auto-flow: row;
   }
@@ -32483,6 +32863,101 @@ video {
     column-gap: 1px;
   }
 
+  .md\:gap-x-0 {
+    grid-column-gap: 0;
+    column-gap: 0;
+  }
+
+  .md\:gap-x-1 {
+    grid-column-gap: 0.25rem;
+    column-gap: 0.25rem;
+  }
+
+  .md\:gap-x-2 {
+    grid-column-gap: 0.5rem;
+    column-gap: 0.5rem;
+  }
+
+  .md\:gap-x-3 {
+    grid-column-gap: 0.75rem;
+    column-gap: 0.75rem;
+  }
+
+  .md\:gap-x-4 {
+    grid-column-gap: 1rem;
+    column-gap: 1rem;
+  }
+
+  .md\:gap-x-5 {
+    grid-column-gap: 1.25rem;
+    column-gap: 1.25rem;
+  }
+
+  .md\:gap-x-6 {
+    grid-column-gap: 1.5rem;
+    column-gap: 1.5rem;
+  }
+
+  .md\:gap-x-8 {
+    grid-column-gap: 2rem;
+    column-gap: 2rem;
+  }
+
+  .md\:gap-x-10 {
+    grid-column-gap: 2.5rem;
+    column-gap: 2.5rem;
+  }
+
+  .md\:gap-x-12 {
+    grid-column-gap: 3rem;
+    column-gap: 3rem;
+  }
+
+  .md\:gap-x-16 {
+    grid-column-gap: 4rem;
+    column-gap: 4rem;
+  }
+
+  .md\:gap-x-20 {
+    grid-column-gap: 5rem;
+    column-gap: 5rem;
+  }
+
+  .md\:gap-x-24 {
+    grid-column-gap: 6rem;
+    column-gap: 6rem;
+  }
+
+  .md\:gap-x-32 {
+    grid-column-gap: 8rem;
+    column-gap: 8rem;
+  }
+
+  .md\:gap-x-40 {
+    grid-column-gap: 10rem;
+    column-gap: 10rem;
+  }
+
+  .md\:gap-x-48 {
+    grid-column-gap: 12rem;
+    column-gap: 12rem;
+  }
+
+  .md\:gap-x-56 {
+    grid-column-gap: 14rem;
+    column-gap: 14rem;
+  }
+
+  .md\:gap-x-64 {
+    grid-column-gap: 16rem;
+    column-gap: 16rem;
+  }
+
+  .md\:gap-x-px {
+    grid-column-gap: 1px;
+    column-gap: 1px;
+  }
+
   .md\:row-gap-0 {
     grid-row-gap: 0;
     row-gap: 0;
@@ -32578,6 +33053,101 @@ video {
     row-gap: 1px;
   }
 
+  .md\:gap-y-0 {
+    grid-row-gap: 0;
+    row-gap: 0;
+  }
+
+  .md\:gap-y-1 {
+    grid-row-gap: 0.25rem;
+    row-gap: 0.25rem;
+  }
+
+  .md\:gap-y-2 {
+    grid-row-gap: 0.5rem;
+    row-gap: 0.5rem;
+  }
+
+  .md\:gap-y-3 {
+    grid-row-gap: 0.75rem;
+    row-gap: 0.75rem;
+  }
+
+  .md\:gap-y-4 {
+    grid-row-gap: 1rem;
+    row-gap: 1rem;
+  }
+
+  .md\:gap-y-5 {
+    grid-row-gap: 1.25rem;
+    row-gap: 1.25rem;
+  }
+
+  .md\:gap-y-6 {
+    grid-row-gap: 1.5rem;
+    row-gap: 1.5rem;
+  }
+
+  .md\:gap-y-8 {
+    grid-row-gap: 2rem;
+    row-gap: 2rem;
+  }
+
+  .md\:gap-y-10 {
+    grid-row-gap: 2.5rem;
+    row-gap: 2.5rem;
+  }
+
+  .md\:gap-y-12 {
+    grid-row-gap: 3rem;
+    row-gap: 3rem;
+  }
+
+  .md\:gap-y-16 {
+    grid-row-gap: 4rem;
+    row-gap: 4rem;
+  }
+
+  .md\:gap-y-20 {
+    grid-row-gap: 5rem;
+    row-gap: 5rem;
+  }
+
+  .md\:gap-y-24 {
+    grid-row-gap: 6rem;
+    row-gap: 6rem;
+  }
+
+  .md\:gap-y-32 {
+    grid-row-gap: 8rem;
+    row-gap: 8rem;
+  }
+
+  .md\:gap-y-40 {
+    grid-row-gap: 10rem;
+    row-gap: 10rem;
+  }
+
+  .md\:gap-y-48 {
+    grid-row-gap: 12rem;
+    row-gap: 12rem;
+  }
+
+  .md\:gap-y-56 {
+    grid-row-gap: 14rem;
+    row-gap: 14rem;
+  }
+
+  .md\:gap-y-64 {
+    grid-row-gap: 16rem;
+    row-gap: 16rem;
+  }
+
+  .md\:gap-y-px {
+    grid-row-gap: 1px;
+    row-gap: 1px;
+  }
+
   .md\:grid-flow-row {
     grid-auto-flow: row;
   }
@@ -43857,6 +44427,101 @@ video {
     column-gap: 1px;
   }
 
+  .lg\:gap-x-0 {
+    grid-column-gap: 0;
+    column-gap: 0;
+  }
+
+  .lg\:gap-x-1 {
+    grid-column-gap: 0.25rem;
+    column-gap: 0.25rem;
+  }
+
+  .lg\:gap-x-2 {
+    grid-column-gap: 0.5rem;
+    column-gap: 0.5rem;
+  }
+
+  .lg\:gap-x-3 {
+    grid-column-gap: 0.75rem;
+    column-gap: 0.75rem;
+  }
+
+  .lg\:gap-x-4 {
+    grid-column-gap: 1rem;
+    column-gap: 1rem;
+  }
+
+  .lg\:gap-x-5 {
+    grid-column-gap: 1.25rem;
+    column-gap: 1.25rem;
+  }
+
+  .lg\:gap-x-6 {
+    grid-column-gap: 1.5rem;
+    column-gap: 1.5rem;
+  }
+
+  .lg\:gap-x-8 {
+    grid-column-gap: 2rem;
+    column-gap: 2rem;
+  }
+
+  .lg\:gap-x-10 {
+    grid-column-gap: 2.5rem;
+    column-gap: 2.5rem;
+  }
+
+  .lg\:gap-x-12 {
+    grid-column-gap: 3rem;
+    column-gap: 3rem;
+  }
+
+  .lg\:gap-x-16 {
+    grid-column-gap: 4rem;
+    column-gap: 4rem;
+  }
+
+  .lg\:gap-x-20 {
+    grid-column-gap: 5rem;
+    column-gap: 5rem;
+  }
+
+  .lg\:gap-x-24 {
+    grid-column-gap: 6rem;
+    column-gap: 6rem;
+  }
+
+  .lg\:gap-x-32 {
+    grid-column-gap: 8rem;
+    column-gap: 8rem;
+  }
+
+  .lg\:gap-x-40 {
+    grid-column-gap: 10rem;
+    column-gap: 10rem;
+  }
+
+  .lg\:gap-x-48 {
+    grid-column-gap: 12rem;
+    column-gap: 12rem;
+  }
+
+  .lg\:gap-x-56 {
+    grid-column-gap: 14rem;
+    column-gap: 14rem;
+  }
+
+  .lg\:gap-x-64 {
+    grid-column-gap: 16rem;
+    column-gap: 16rem;
+  }
+
+  .lg\:gap-x-px {
+    grid-column-gap: 1px;
+    column-gap: 1px;
+  }
+
   .lg\:row-gap-0 {
     grid-row-gap: 0;
     row-gap: 0;
@@ -43952,6 +44617,101 @@ video {
     row-gap: 1px;
   }
 
+  .lg\:gap-y-0 {
+    grid-row-gap: 0;
+    row-gap: 0;
+  }
+
+  .lg\:gap-y-1 {
+    grid-row-gap: 0.25rem;
+    row-gap: 0.25rem;
+  }
+
+  .lg\:gap-y-2 {
+    grid-row-gap: 0.5rem;
+    row-gap: 0.5rem;
+  }
+
+  .lg\:gap-y-3 {
+    grid-row-gap: 0.75rem;
+    row-gap: 0.75rem;
+  }
+
+  .lg\:gap-y-4 {
+    grid-row-gap: 1rem;
+    row-gap: 1rem;
+  }
+
+  .lg\:gap-y-5 {
+    grid-row-gap: 1.25rem;
+    row-gap: 1.25rem;
+  }
+
+  .lg\:gap-y-6 {
+    grid-row-gap: 1.5rem;
+    row-gap: 1.5rem;
+  }
+
+  .lg\:gap-y-8 {
+    grid-row-gap: 2rem;
+    row-gap: 2rem;
+  }
+
+  .lg\:gap-y-10 {
+    grid-row-gap: 2.5rem;
+    row-gap: 2.5rem;
+  }
+
+  .lg\:gap-y-12 {
+    grid-row-gap: 3rem;
+    row-gap: 3rem;
+  }
+
+  .lg\:gap-y-16 {
+    grid-row-gap: 4rem;
+    row-gap: 4rem;
+  }
+
+  .lg\:gap-y-20 {
+    grid-row-gap: 5rem;
+    row-gap: 5rem;
+  }
+
+  .lg\:gap-y-24 {
+    grid-row-gap: 6rem;
+    row-gap: 6rem;
+  }
+
+  .lg\:gap-y-32 {
+    grid-row-gap: 8rem;
+    row-gap: 8rem;
+  }
+
+  .lg\:gap-y-40 {
+    grid-row-gap: 10rem;
+    row-gap: 10rem;
+  }
+
+  .lg\:gap-y-48 {
+    grid-row-gap: 12rem;
+    row-gap: 12rem;
+  }
+
+  .lg\:gap-y-56 {
+    grid-row-gap: 14rem;
+    row-gap: 14rem;
+  }
+
+  .lg\:gap-y-64 {
+    grid-row-gap: 16rem;
+    row-gap: 16rem;
+  }
+
+  .lg\:gap-y-px {
+    grid-row-gap: 1px;
+    row-gap: 1px;
+  }
+
   .lg\:grid-flow-row {
     grid-auto-flow: row;
   }
@@ -55231,6 +55991,101 @@ video {
     column-gap: 1px;
   }
 
+  .xl\:gap-x-0 {
+    grid-column-gap: 0;
+    column-gap: 0;
+  }
+
+  .xl\:gap-x-1 {
+    grid-column-gap: 0.25rem;
+    column-gap: 0.25rem;
+  }
+
+  .xl\:gap-x-2 {
+    grid-column-gap: 0.5rem;
+    column-gap: 0.5rem;
+  }
+
+  .xl\:gap-x-3 {
+    grid-column-gap: 0.75rem;
+    column-gap: 0.75rem;
+  }
+
+  .xl\:gap-x-4 {
+    grid-column-gap: 1rem;
+    column-gap: 1rem;
+  }
+
+  .xl\:gap-x-5 {
+    grid-column-gap: 1.25rem;
+    column-gap: 1.25rem;
+  }
+
+  .xl\:gap-x-6 {
+    grid-column-gap: 1.5rem;
+    column-gap: 1.5rem;
+  }
+
+  .xl\:gap-x-8 {
+    grid-column-gap: 2rem;
+    column-gap: 2rem;
+  }
+
+  .xl\:gap-x-10 {
+    grid-column-gap: 2.5rem;
+    column-gap: 2.5rem;
+  }
+
+  .xl\:gap-x-12 {
+    grid-column-gap: 3rem;
+    column-gap: 3rem;
+  }
+
+  .xl\:gap-x-16 {
+    grid-column-gap: 4rem;
+    column-gap: 4rem;
+  }
+
+  .xl\:gap-x-20 {
+    grid-column-gap: 5rem;
+    column-gap: 5rem;
+  }
+
+  .xl\:gap-x-24 {
+    grid-column-gap: 6rem;
+    column-gap: 6rem;
+  }
+
+  .xl\:gap-x-32 {
+    grid-column-gap: 8rem;
+    column-gap: 8rem;
+  }
+
+  .xl\:gap-x-40 {
+    grid-column-gap: 10rem;
+    column-gap: 10rem;
+  }
+
+  .xl\:gap-x-48 {
+    grid-column-gap: 12rem;
+    column-gap: 12rem;
+  }
+
+  .xl\:gap-x-56 {
+    grid-column-gap: 14rem;
+    column-gap: 14rem;
+  }
+
+  .xl\:gap-x-64 {
+    grid-column-gap: 16rem;
+    column-gap: 16rem;
+  }
+
+  .xl\:gap-x-px {
+    grid-column-gap: 1px;
+    column-gap: 1px;
+  }
+
   .xl\:row-gap-0 {
     grid-row-gap: 0;
     row-gap: 0;
@@ -55326,6 +56181,101 @@ video {
     row-gap: 1px;
   }
 
+  .xl\:gap-y-0 {
+    grid-row-gap: 0;
+    row-gap: 0;
+  }
+
+  .xl\:gap-y-1 {
+    grid-row-gap: 0.25rem;
+    row-gap: 0.25rem;
+  }
+
+  .xl\:gap-y-2 {
+    grid-row-gap: 0.5rem;
+    row-gap: 0.5rem;
+  }
+
+  .xl\:gap-y-3 {
+    grid-row-gap: 0.75rem;
+    row-gap: 0.75rem;
+  }
+
+  .xl\:gap-y-4 {
+    grid-row-gap: 1rem;
+    row-gap: 1rem;
+  }
+
+  .xl\:gap-y-5 {
+    grid-row-gap: 1.25rem;
+    row-gap: 1.25rem;
+  }
+
+  .xl\:gap-y-6 {
+    grid-row-gap: 1.5rem;
+    row-gap: 1.5rem;
+  }
+
+  .xl\:gap-y-8 {
+    grid-row-gap: 2rem;
+    row-gap: 2rem;
+  }
+
+  .xl\:gap-y-10 {
+    grid-row-gap: 2.5rem;
+    row-gap: 2.5rem;
+  }
+
+  .xl\:gap-y-12 {
+    grid-row-gap: 3rem;
+    row-gap: 3rem;
+  }
+
+  .xl\:gap-y-16 {
+    grid-row-gap: 4rem;
+    row-gap: 4rem;
+  }
+
+  .xl\:gap-y-20 {
+    grid-row-gap: 5rem;
+    row-gap: 5rem;
+  }
+
+  .xl\:gap-y-24 {
+    grid-row-gap: 6rem;
+    row-gap: 6rem;
+  }
+
+  .xl\:gap-y-32 {
+    grid-row-gap: 8rem;
+    row-gap: 8rem;
+  }
+
+  .xl\:gap-y-40 {
+    grid-row-gap: 10rem;
+    row-gap: 10rem;
+  }
+
+  .xl\:gap-y-48 {
+    grid-row-gap: 12rem;
+    row-gap: 12rem;
+  }
+
+  .xl\:gap-y-56 {
+    grid-row-gap: 14rem;
+    row-gap: 14rem;
+  }
+
+  .xl\:gap-y-64 {
+    grid-row-gap: 16rem;
+    row-gap: 16rem;
+  }
+
+  .xl\:gap-y-px {
+    grid-row-gap: 1px;
+    row-gap: 1px;
+  }
+
   .xl\:grid-flow-row {
     grid-auto-flow: row;
   }
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 72d1eb12..7f5a489c 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -12140,6 +12140,101 @@ video {
   column-gap: 1px;
 }
 
+.gap-x-0 {
+  grid-column-gap: 0;
+  column-gap: 0;
+}
+
+.gap-x-1 {
+  grid-column-gap: 0.25rem;
+  column-gap: 0.25rem;
+}
+
+.gap-x-2 {
+  grid-column-gap: 0.5rem;
+  column-gap: 0.5rem;
+}
+
+.gap-x-3 {
+  grid-column-gap: 0.75rem;
+  column-gap: 0.75rem;
+}
+
+.gap-x-4 {
+  grid-column-gap: 1rem;
+  column-gap: 1rem;
+}
+
+.gap-x-5 {
+  grid-column-gap: 1.25rem;
+  column-gap: 1.25rem;
+}
+
+.gap-x-6 {
+  grid-column-gap: 1.5rem;
+  column-gap: 1.5rem;
+}
+
+.gap-x-8 {
+  grid-column-gap: 2rem;
+  column-gap: 2rem;
+}
+
+.gap-x-10 {
+  grid-column-gap: 2.5rem;
+  column-gap: 2.5rem;
+}
+
+.gap-x-12 {
+  grid-column-gap: 3rem;
+  column-gap: 3rem;
+}
+
+.gap-x-16 {
+  grid-column-gap: 4rem;
+  column-gap: 4rem;
+}
+
+.gap-x-20 {
+  grid-column-gap: 5rem;
+  column-gap: 5rem;
+}
+
+.gap-x-24 {
+  grid-column-gap: 6rem;
+  column-gap: 6rem;
+}
+
+.gap-x-32 {
+  grid-column-gap: 8rem;
+  column-gap: 8rem;
+}
+
+.gap-x-40 {
+  grid-column-gap: 10rem;
+  column-gap: 10rem;
+}
+
+.gap-x-48 {
+  grid-column-gap: 12rem;
+  column-gap: 12rem;
+}
+
+.gap-x-56 {
+  grid-column-gap: 14rem;
+  column-gap: 14rem;
+}
+
+.gap-x-64 {
+  grid-column-gap: 16rem;
+  column-gap: 16rem;
+}
+
+.gap-x-px {
+  grid-column-gap: 1px;
+  column-gap: 1px;
+}
+
 .row-gap-0 {
   grid-row-gap: 0;
   row-gap: 0;
@@ -12235,6 +12330,101 @@ video {
   row-gap: 1px;
 }
 
+.gap-y-0 {
+  grid-row-gap: 0;
+  row-gap: 0;
+}
+
+.gap-y-1 {
+  grid-row-gap: 0.25rem;
+  row-gap: 0.25rem;
+}
+
+.gap-y-2 {
+  grid-row-gap: 0.5rem;
+  row-gap: 0.5rem;
+}
+
+.gap-y-3 {
+  grid-row-gap: 0.75rem;
+  row-gap: 0.75rem;
+}
+
+.gap-y-4 {
+  grid-row-gap: 1rem;
+  row-gap: 1rem;
+}
+
+.gap-y-5 {
+  grid-row-gap: 1.25rem;
+  row-gap: 1.25rem;
+}
+
+.gap-y-6 {
+  grid-row-gap: 1.5rem;
+  row-gap: 1.5rem;
+}
+
+.gap-y-8 {
+  grid-row-gap: 2rem;
+  row-gap: 2rem;
+}
+
+.gap-y-10 {
+  grid-row-gap: 2.5rem;
+  row-gap: 2.5rem;
+}
+
+.gap-y-12 {
+  grid-row-gap: 3rem;
+  row-gap: 3rem;
+}
+
+.gap-y-16 {
+  grid-row-gap: 4rem;
+  row-gap: 4rem;
+}
+
+.gap-y-20 {
+  grid-row-gap: 5rem;
+  row-gap: 5rem;
+}
+
+.gap-y-24 {
+  grid-row-gap: 6rem;
+  row-gap: 6rem;
+}
+
+.gap-y-32 {
+  grid-row-gap: 8rem;
+  row-gap: 8rem;
+}
+
+.gap-y-40 {
+  grid-row-gap: 10rem;
+  row-gap: 10rem;
+}
+
+.gap-y-48 {
+  grid-row-gap: 12rem;
+  row-gap: 12rem;
+}
+
+.gap-y-56 {
+  grid-row-gap: 14rem;
+  row-gap: 14rem;
+}
+
+.gap-y-64 {
+  grid-row-gap: 16rem;
+  row-gap: 16rem;
+}
+
+.gap-y-px {
+  grid-row-gap: 1px;
+  row-gap: 1px;
+}
+
 .grid-flow-row {
   grid-auto-flow: row;
 }
@@ -26005,6 +26195,101 @@ video {
     column-gap: 1px;
   }
 
+  .sm\:gap-x-0 {
+    grid-column-gap: 0;
+    column-gap: 0;
+  }
+
+  .sm\:gap-x-1 {
+    grid-column-gap: 0.25rem;
+    column-gap: 0.25rem;
+  }
+
+  .sm\:gap-x-2 {
+    grid-column-gap: 0.5rem;
+    column-gap: 0.5rem;
+  }
+
+  .sm\:gap-x-3 {
+    grid-column-gap: 0.75rem;
+    column-gap: 0.75rem;
+  }
+
+  .sm\:gap-x-4 {
+    grid-column-gap: 1rem;
+    column-gap: 1rem;
+  }
+
+  .sm\:gap-x-5 {
+    grid-column-gap: 1.25rem;
+    column-gap: 1.25rem;
+  }
+
+  .sm\:gap-x-6 {
+    grid-column-gap: 1.5rem;
+    column-gap: 1.5rem;
+  }
+
+  .sm\:gap-x-8 {
+    grid-column-gap: 2rem;
+    column-gap: 2rem;
+  }
+
+  .sm\:gap-x-10 {
+    grid-column-gap: 2.5rem;
+    column-gap: 2.5rem;
+  }
+
+  .sm\:gap-x-12 {
+    grid-column-gap: 3rem;
+    column-gap: 3rem;
+  }
+
+  .sm\:gap-x-16 {
+    grid-column-gap: 4rem;
+    column-gap: 4rem;
+  }
+
+  .sm\:gap-x-20 {
+    grid-column-gap: 5rem;
+    column-gap: 5rem;
+  }
+
+  .sm\:gap-x-24 {
+    grid-column-gap: 6rem;
+    column-gap: 6rem;
+  }
+
+  .sm\:gap-x-32 {
+    grid-column-gap: 8rem;
+    column-gap: 8rem;
+  }
+
+  .sm\:gap-x-40 {
+    grid-column-gap: 10rem;
+    column-gap: 10rem;
+  }
+
+  .sm\:gap-x-48 {
+    grid-column-gap: 12rem;
+    column-gap: 12rem;
+  }
+
+  .sm\:gap-x-56 {
+    grid-column-gap: 14rem;
+    column-gap: 14rem;
+  }
+
+  .sm\:gap-x-64 {
+    grid-column-gap: 16rem;
+    column-gap: 16rem;
+  }
+
+  .sm\:gap-x-px {
+    grid-column-gap: 1px;
+    column-gap: 1px;
+  }
+
   .sm\:row-gap-0 {
     grid-row-gap: 0;
     row-gap: 0;
@@ -26100,6 +26385,101 @@ video {
     row-gap: 1px;
   }
 
+  .sm\:gap-y-0 {
+    grid-row-gap: 0;
+    row-gap: 0;
+  }
+
+  .sm\:gap-y-1 {
+    grid-row-gap: 0.25rem;
+    row-gap: 0.25rem;
+  }
+
+  .sm\:gap-y-2 {
+    grid-row-gap: 0.5rem;
+    row-gap: 0.5rem;
+  }
+
+  .sm\:gap-y-3 {
+    grid-row-gap: 0.75rem;
+    row-gap: 0.75rem;
+  }
+
+  .sm\:gap-y-4 {
+    grid-row-gap: 1rem;
+    row-gap: 1rem;
+  }
+
+  .sm\:gap-y-5 {
+    grid-row-gap: 1.25rem;
+    row-gap: 1.25rem;
+  }
+
+  .sm\:gap-y-6 {
+    grid-row-gap: 1.5rem;
+    row-gap: 1.5rem;
+  }
+
+  .sm\:gap-y-8 {
+    grid-row-gap: 2rem;
+    row-gap: 2rem;
+  }
+
+  .sm\:gap-y-10 {
+    grid-row-gap: 2.5rem;
+    row-gap: 2.5rem;
+  }
+
+  .sm\:gap-y-12 {
+    grid-row-gap: 3rem;
+    row-gap: 3rem;
+  }
+
+  .sm\:gap-y-16 {
+    grid-row-gap: 4rem;
+    row-gap: 4rem;
+  }
+
+  .sm\:gap-y-20 {
+    grid-row-gap: 5rem;
+    row-gap: 5rem;
+  }
+
+  .sm\:gap-y-24 {
+    grid-row-gap: 6rem;
+    row-gap: 6rem;
+  }
+
+  .sm\:gap-y-32 {
+    grid-row-gap: 8rem;
+    row-gap: 8rem;
+  }
+
+  .sm\:gap-y-40 {
+    grid-row-gap: 10rem;
+    row-gap: 10rem;
+  }
+
+  .sm\:gap-y-48 {
+    grid-row-gap: 12rem;
+    row-gap: 12rem;
+  }
+
+  .sm\:gap-y-56 {
+    grid-row-gap: 14rem;
+    row-gap: 14rem;
+  }
+
+  .sm\:gap-y-64 {
+    grid-row-gap: 16rem;
+    row-gap: 16rem;
+  }
+
+  .sm\:gap-y-px {
+    grid-row-gap: 1px;
+    row-gap: 1px;
+  }
+
   .sm\:grid-flow-row {
     grid-auto-flow: row;
   }
@@ -39827,6 +40207,101 @@ video {
     column-gap: 1px;
   }
 
+  .md\:gap-x-0 {
+    grid-column-gap: 0;
+    column-gap: 0;
+  }
+
+  .md\:gap-x-1 {
+    grid-column-gap: 0.25rem;
+    column-gap: 0.25rem;
+  }
+
+  .md\:gap-x-2 {
+    grid-column-gap: 0.5rem;
+    column-gap: 0.5rem;
+  }
+
+  .md\:gap-x-3 {
+    grid-column-gap: 0.75rem;
+    column-gap: 0.75rem;
+  }
+
+  .md\:gap-x-4 {
+    grid-column-gap: 1rem;
+    column-gap: 1rem;
+  }
+
+  .md\:gap-x-5 {
+    grid-column-gap: 1.25rem;
+    column-gap: 1.25rem;
+  }
+
+  .md\:gap-x-6 {
+    grid-column-gap: 1.5rem;
+    column-gap: 1.5rem;
+  }
+
+  .md\:gap-x-8 {
+    grid-column-gap: 2rem;
+    column-gap: 2rem;
+  }
+
+  .md\:gap-x-10 {
+    grid-column-gap: 2.5rem;
+    column-gap: 2.5rem;
+  }
+
+  .md\:gap-x-12 {
+    grid-column-gap: 3rem;
+    column-gap: 3rem;
+  }
+
+  .md\:gap-x-16 {
+    grid-column-gap: 4rem;
+    column-gap: 4rem;
+  }
+
+  .md\:gap-x-20 {
+    grid-column-gap: 5rem;
+    column-gap: 5rem;
+  }
+
+  .md\:gap-x-24 {
+    grid-column-gap: 6rem;
+    column-gap: 6rem;
+  }
+
+  .md\:gap-x-32 {
+    grid-column-gap: 8rem;
+    column-gap: 8rem;
+  }
+
+  .md\:gap-x-40 {
+    grid-column-gap: 10rem;
+    column-gap: 10rem;
+  }
+
+  .md\:gap-x-48 {
+    grid-column-gap: 12rem;
+    column-gap: 12rem;
+  }
+
+  .md\:gap-x-56 {
+    grid-column-gap: 14rem;
+    column-gap: 14rem;
+  }
+
+  .md\:gap-x-64 {
+    grid-column-gap: 16rem;
+    column-gap: 16rem;
+  }
+
+  .md\:gap-x-px {
+    grid-column-gap: 1px;
+    column-gap: 1px;
+  }
+
   .md\:row-gap-0 {
     grid-row-gap: 0;
     row-gap: 0;
@@ -39922,6 +40397,101 @@ video {
     row-gap: 1px;
   }
 
+  .md\:gap-y-0 {
+    grid-row-gap: 0;
+    row-gap: 0;
+  }
+
+  .md\:gap-y-1 {
+    grid-row-gap: 0.25rem;
+    row-gap: 0.25rem;
+  }
+
+  .md\:gap-y-2 {
+    grid-row-gap: 0.5rem;
+    row-gap: 0.5rem;
+  }
+
+  .md\:gap-y-3 {
+    grid-row-gap: 0.75rem;
+    row-gap: 0.75rem;
+  }
+
+  .md\:gap-y-4 {
+    grid-row-gap: 1rem;
+    row-gap: 1rem;
+  }
+
+  .md\:gap-y-5 {
+    grid-row-gap: 1.25rem;
+    row-gap: 1.25rem;
+  }
+
+  .md\:gap-y-6 {
+    grid-row-gap: 1.5rem;
+    row-gap: 1.5rem;
+  }
+
+  .md\:gap-y-8 {
+    grid-row-gap: 2rem;
+    row-gap: 2rem;
+  }
+
+  .md\:gap-y-10 {
+    grid-row-gap: 2.5rem;
+    row-gap: 2.5rem;
+  }
+
+  .md\:gap-y-12 {
+    grid-row-gap: 3rem;
+    row-gap: 3rem;
+  }
+
+  .md\:gap-y-16 {
+    grid-row-gap: 4rem;
+    row-gap: 4rem;
+  }
+
+  .md\:gap-y-20 {
+    grid-row-gap: 5rem;
+    row-gap: 5rem;
+  }
+
+  .md\:gap-y-24 {
+    grid-row-gap: 6rem;
+    row-gap: 6rem;
+  }
+
+  .md\:gap-y-32 {
+    grid-row-gap: 8rem;
+    row-gap: 8rem;
+  }
+
+  .md\:gap-y-40 {
+    grid-row-gap: 10rem;
+    row-gap: 10rem;
+  }
+
+  .md\:gap-y-48 {
+    grid-row-gap: 12rem;
+    row-gap: 12rem;
+  }
+
+  .md\:gap-y-56 {
+    grid-row-gap: 14rem;
+    row-gap: 14rem;
+  }
+
+  .md\:gap-y-64 {
+    grid-row-gap: 16rem;
+    row-gap: 16rem;
+  }
+
+  .md\:gap-y-px {
+    grid-row-gap: 1px;
+    row-gap: 1px;
+  }
+
   .md\:grid-flow-row {
     grid-auto-flow: row;
   }
@@ -53649,6 +54219,101 @@ video {
     column-gap: 1px;
   }
 
+  .lg\:gap-x-0 {
+    grid-column-gap: 0;
+    column-gap: 0;
+  }
+
+  .lg\:gap-x-1 {
+    grid-column-gap: 0.25rem;
+    column-gap: 0.25rem;
+  }
+
+  .lg\:gap-x-2 {
+    grid-column-gap: 0.5rem;
+    column-gap: 0.5rem;
+  }
+
+  .lg\:gap-x-3 {
+    grid-column-gap: 0.75rem;
+    column-gap: 0.75rem;
+  }
+
+  .lg\:gap-x-4 {
+    grid-column-gap: 1rem;
+    column-gap: 1rem;
+  }
+
+  .lg\:gap-x-5 {
+    grid-column-gap: 1.25rem;
+    column-gap: 1.25rem;
+  }
+
+  .lg\:gap-x-6 {
+    grid-column-gap: 1.5rem;
+    column-gap: 1.5rem;
+  }
+
+  .lg\:gap-x-8 {
+    grid-column-gap: 2rem;
+    column-gap: 2rem;
+  }
+
+  .lg\:gap-x-10 {
+    grid-column-gap: 2.5rem;
+    column-gap: 2.5rem;
+  }
+
+  .lg\:gap-x-12 {
+    grid-column-gap: 3rem;
+    column-gap: 3rem;
+  }
+
+  .lg\:gap-x-16 {
+    grid-column-gap: 4rem;
+    column-gap: 4rem;
+  }
+
+  .lg\:gap-x-20 {
+    grid-column-gap: 5rem;
+    column-gap: 5rem;
+  }
+
+  .lg\:gap-x-24 {
+    grid-column-gap: 6rem;
+    column-gap: 6rem;
+  }
+
+  .lg\:gap-x-32 {
+    grid-column-gap: 8rem;
+    column-gap: 8rem;
+  }
+
+  .lg\:gap-x-40 {
+    grid-column-gap: 10rem;
+    column-gap: 10rem;
+  }
+
+  .lg\:gap-x-48 {
+    grid-column-gap: 12rem;
+    column-gap: 12rem;
+  }
+
+  .lg\:gap-x-56 {
+    grid-column-gap: 14rem;
+    column-gap: 14rem;
+  }
+
+  .lg\:gap-x-64 {
+    grid-column-gap: 16rem;
+    column-gap: 16rem;
+  }
+
+  .lg\:gap-x-px {
+    grid-column-gap: 1px;
+    column-gap: 1px;
+  }
+
   .lg\:row-gap-0 {
     grid-row-gap: 0;
     row-gap: 0;
@@ -53744,6 +54409,101 @@ video {
     row-gap: 1px;
   }
 
+  .lg\:gap-y-0 {
+    grid-row-gap: 0;
+    row-gap: 0;
+  }
+
+  .lg\:gap-y-1 {
+    grid-row-gap: 0.25rem;
+    row-gap: 0.25rem;
+  }
+
+  .lg\:gap-y-2 {
+    grid-row-gap: 0.5rem;
+    row-gap: 0.5rem;
+  }
+
+  .lg\:gap-y-3 {
+    grid-row-gap: 0.75rem;
+    row-gap: 0.75rem;
+  }
+
+  .lg\:gap-y-4 {
+    grid-row-gap: 1rem;
+    row-gap: 1rem;
+  }
+
+  .lg\:gap-y-5 {
+    grid-row-gap: 1.25rem;
+    row-gap: 1.25rem;
+  }
+
+  .lg\:gap-y-6 {
+    grid-row-gap: 1.5rem;
+    row-gap: 1.5rem;
+  }
+
+  .lg\:gap-y-8 {
+    grid-row-gap: 2rem;
+    row-gap: 2rem;
+  }
+
+  .lg\:gap-y-10 {
+    grid-row-gap: 2.5rem;
+    row-gap: 2.5rem;
+  }
+
+  .lg\:gap-y-12 {
+    grid-row-gap: 3rem;
+    row-gap: 3rem;
+  }
+
+  .lg\:gap-y-16 {
+    grid-row-gap: 4rem;
+    row-gap: 4rem;
+  }
+
+  .lg\:gap-y-20 {
+    grid-row-gap: 5rem;
+    row-gap: 5rem;
+  }
+
+  .lg\:gap-y-24 {
+    grid-row-gap: 6rem;
+    row-gap: 6rem;
+  }
+
+  .lg\:gap-y-32 {
+    grid-row-gap: 8rem;
+    row-gap: 8rem;
+  }
+
+  .lg\:gap-y-40 {
+    grid-row-gap: 10rem;
+    row-gap: 10rem;
+  }
+
+  .lg\:gap-y-48 {
+    grid-row-gap: 12rem;
+    row-gap: 12rem;
+  }
+
+  .lg\:gap-y-56 {
+    grid-row-gap: 14rem;
+    row-gap: 14rem;
+  }
+
+  .lg\:gap-y-64 {
+    grid-row-gap: 16rem;
+    row-gap: 16rem;
+  }
+
+  .lg\:gap-y-px {
+    grid-row-gap: 1px;
+    row-gap: 1px;
+  }
+
   .lg\:grid-flow-row {
     grid-auto-flow: row;
   }
@@ -67471,6 +68231,101 @@ video {
     column-gap: 1px;
   }
 
+  .xl\:gap-x-0 {
+    grid-column-gap: 0;
+    column-gap: 0;
+  }
+
+  .xl\:gap-x-1 {
+    grid-column-gap: 0.25rem;
+    column-gap: 0.25rem;
+  }
+
+  .xl\:gap-x-2 {
+    grid-column-gap: 0.5rem;
+    column-gap: 0.5rem;
+  }
+
+  .xl\:gap-x-3 {
+    grid-column-gap: 0.75rem;
+    column-gap: 0.75rem;
+  }
+
+  .xl\:gap-x-4 {
+    grid-column-gap: 1rem;
+    column-gap: 1rem;
+  }
+
+  .xl\:gap-x-5 {
+    grid-column-gap: 1.25rem;
+    column-gap: 1.25rem;
+  }
+
+  .xl\:gap-x-6 {
+    grid-column-gap: 1.5rem;
+    column-gap: 1.5rem;
+  }
+
+  .xl\:gap-x-8 {
+    grid-column-gap: 2rem;
+    column-gap: 2rem;
+  }
+
+  .xl\:gap-x-10 {
+    grid-column-gap: 2.5rem;
+    column-gap: 2.5rem;
+  }
+
+  .xl\:gap-x-12 {
+    grid-column-gap: 3rem;
+    column-gap: 3rem;
+  }
+
+  .xl\:gap-x-16 {
+    grid-column-gap: 4rem;
+    column-gap: 4rem;
+  }
+
+  .xl\:gap-x-20 {
+    grid-column-gap: 5rem;
+    column-gap: 5rem;
+  }
+
+  .xl\:gap-x-24 {
+    grid-column-gap: 6rem;
+    column-gap: 6rem;
+  }
+
+  .xl\:gap-x-32 {
+    grid-column-gap: 8rem;
+    column-gap: 8rem;
+  }
+
+  .xl\:gap-x-40 {
+    grid-column-gap: 10rem;
+    column-gap: 10rem;
+  }
+
+  .xl\:gap-x-48 {
+    grid-column-gap: 12rem;
+    column-gap: 12rem;
+  }
+
+  .xl\:gap-x-56 {
+    grid-column-gap: 14rem;
+    column-gap: 14rem;
+  }
+
+  .xl\:gap-x-64 {
+    grid-column-gap: 16rem;
+    column-gap: 16rem;
+  }
+
+  .xl\:gap-x-px {
+    grid-column-gap: 1px;
+    column-gap: 1px;
+  }
+
   .xl\:row-gap-0 {
     grid-row-gap: 0;
     row-gap: 0;
@@ -67566,6 +68421,101 @@ video {
     row-gap: 1px;
   }
 
+  .xl\:gap-y-0 {
+    grid-row-gap: 0;
+    row-gap: 0;
+  }
+
+  .xl\:gap-y-1 {
+    grid-row-gap: 0.25rem;
+    row-gap: 0.25rem;
+  }
+
+  .xl\:gap-y-2 {
+    grid-row-gap: 0.5rem;
+    row-gap: 0.5rem;
+  }
+
+  .xl\:gap-y-3 {
+    grid-row-gap: 0.75rem;
+    row-gap: 0.75rem;
+  }
+
+  .xl\:gap-y-4 {
+    grid-row-gap: 1rem;
+    row-gap: 1rem;
+  }
+
+  .xl\:gap-y-5 {
+    grid-row-gap: 1.25rem;
+    row-gap: 1.25rem;
+  }
+
+  .xl\:gap-y-6 {
+    grid-row-gap: 1.5rem;
+    row-gap: 1.5rem;
+  }
+
+  .xl\:gap-y-8 {
+    grid-row-gap: 2rem;
+    row-gap: 2rem;
+  }
+
+  .xl\:gap-y-10 {
+    grid-row-gap: 2.5rem;
+    row-gap: 2.5rem;
+  }
+
+  .xl\:gap-y-12 {
+    grid-row-gap: 3rem;
+    row-gap: 3rem;
+  }
+
+  .xl\:gap-y-16 {
+    grid-row-gap: 4rem;
+    row-gap: 4rem;
+  }
+
+  .xl\:gap-y-20 {
+    grid-row-gap: 5rem;
+    row-gap: 5rem;
+  }
+
+  .xl\:gap-y-24 {
+    grid-row-gap: 6rem;
+    row-gap: 6rem;
+  }
+
+  .xl\:gap-y-32 {
+    grid-row-gap: 8rem;
+    row-gap: 8rem;
+  }
+
+  .xl\:gap-y-40 {
+    grid-row-gap: 10rem;
+    row-gap: 10rem;
+  }
+
+  .xl\:gap-y-48 {
+    grid-row-gap: 12rem;
+    row-gap: 12rem;
+  }
+
+  .xl\:gap-y-56 {
+    grid-row-gap: 14rem;
+    row-gap: 14rem;
+  }
+
+  .xl\:gap-y-64 {
+    grid-row-gap: 16rem;
+    row-gap: 16rem;
+  }
+
+  .xl\:gap-y-px {
+    grid-row-gap: 1px;
+    row-gap: 1px;
+  }
+
   .xl\:grid-flow-row {
     grid-auto-flow: row;
   }
diff --git a/__tests__/sanity.test.js b/__tests__/sanity.test.js
index e02111c9..a5dbeddf 100644
--- a/__tests__/sanity.test.js
+++ b/__tests__/sanity.test.js
@@ -58,9 +58,8 @@ it('generates the right CSS when enabling flagged features', () => {
 
   return postcss([
     tailwind({
-      experimental: {
-        uniformColorPalette: true,
-      },
+      future: 'all',
+      experimental: 'all',
     }),
   ])
     .process(input, { from: inputPath })