From ba640fc79ab3a4414f0d3afb0e89f6c8db2d90f6 Mon Sep 17 00:00:00 2001
From: Codeminer42 <codeminer42@Codeminer42s-Mac-mini.local>
Date: Thu, 22 Aug 2019 16:55:23 -0300
Subject: [PATCH 01/15] Add stroke-width plugin

---
 .../fixtures/tailwind-output-important.css    | 100 ++++++++++++++++++
 __tests__/fixtures/tailwind-output.css        | 100 ++++++++++++++++++
 __tests__/plugins/strokeWidth.test.js         |  57 ++++++++++
 src/corePlugins.js                            |   2 +
 src/plugins/strokeWidth.js                    |  19 ++++
 stubs/defaultConfig.stub.js                   |   8 ++
 6 files changed, 286 insertions(+)
 create mode 100644 __tests__/plugins/strokeWidth.test.js
 create mode 100644 src/plugins/strokeWidth.js

diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index 539264569..33f6b6c1d 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -6758,6 +6758,26 @@ video {
   stroke: currentColor !important;
 }
 
+.stroke-w-0 {
+  stroke-width: 0 !important;
+}
+
+.stroke-w-1 {
+  stroke-width: 1px !important;
+}
+
+.stroke-w-2 {
+  stroke-width: 2px !important;
+}
+
+.stroke-w-3 {
+  stroke-width: 3px !important;
+}
+
+.stroke-w-4 {
+  stroke-width: 4px !important;
+}
+
 .table-auto {
   table-layout: auto !important;
 }
@@ -14493,6 +14513,26 @@ video {
     stroke: currentColor !important;
   }
 
+  .sm\:stroke-w-0 {
+    stroke-width: 0 !important;
+  }
+
+  .sm\:stroke-w-1 {
+    stroke-width: 1px !important;
+  }
+
+  .sm\:stroke-w-2 {
+    stroke-width: 2px !important;
+  }
+
+  .sm\:stroke-w-3 {
+    stroke-width: 3px !important;
+  }
+
+  .sm\:stroke-w-4 {
+    stroke-width: 4px !important;
+  }
+
   .sm\:table-auto {
     table-layout: auto !important;
   }
@@ -22229,6 +22269,26 @@ video {
     stroke: currentColor !important;
   }
 
+  .md\:stroke-w-0 {
+    stroke-width: 0 !important;
+  }
+
+  .md\:stroke-w-1 {
+    stroke-width: 1px !important;
+  }
+
+  .md\:stroke-w-2 {
+    stroke-width: 2px !important;
+  }
+
+  .md\:stroke-w-3 {
+    stroke-width: 3px !important;
+  }
+
+  .md\:stroke-w-4 {
+    stroke-width: 4px !important;
+  }
+
   .md\:table-auto {
     table-layout: auto !important;
   }
@@ -29965,6 +30025,26 @@ video {
     stroke: currentColor !important;
   }
 
+  .lg\:stroke-w-0 {
+    stroke-width: 0 !important;
+  }
+
+  .lg\:stroke-w-1 {
+    stroke-width: 1px !important;
+  }
+
+  .lg\:stroke-w-2 {
+    stroke-width: 2px !important;
+  }
+
+  .lg\:stroke-w-3 {
+    stroke-width: 3px !important;
+  }
+
+  .lg\:stroke-w-4 {
+    stroke-width: 4px !important;
+  }
+
   .lg\:table-auto {
     table-layout: auto !important;
   }
@@ -37701,6 +37781,26 @@ video {
     stroke: currentColor !important;
   }
 
+  .xl\:stroke-w-0 {
+    stroke-width: 0 !important;
+  }
+
+  .xl\:stroke-w-1 {
+    stroke-width: 1px !important;
+  }
+
+  .xl\:stroke-w-2 {
+    stroke-width: 2px !important;
+  }
+
+  .xl\:stroke-w-3 {
+    stroke-width: 3px !important;
+  }
+
+  .xl\:stroke-w-4 {
+    stroke-width: 4px !important;
+  }
+
   .xl\:table-auto {
     table-layout: auto !important;
   }
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 498b3c05d..ad58c75f8 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -6758,6 +6758,26 @@ video {
   stroke: currentColor;
 }
 
+.stroke-w-0 {
+  stroke-width: 0;
+}
+
+.stroke-w-1 {
+  stroke-width: 1px;
+}
+
+.stroke-w-2 {
+  stroke-width: 2px;
+}
+
+.stroke-w-3 {
+  stroke-width: 3px;
+}
+
+.stroke-w-4 {
+  stroke-width: 4px;
+}
+
 .table-auto {
   table-layout: auto;
 }
@@ -14493,6 +14513,26 @@ video {
     stroke: currentColor;
   }
 
+  .sm\:stroke-w-0 {
+    stroke-width: 0;
+  }
+
+  .sm\:stroke-w-1 {
+    stroke-width: 1px;
+  }
+
+  .sm\:stroke-w-2 {
+    stroke-width: 2px;
+  }
+
+  .sm\:stroke-w-3 {
+    stroke-width: 3px;
+  }
+
+  .sm\:stroke-w-4 {
+    stroke-width: 4px;
+  }
+
   .sm\:table-auto {
     table-layout: auto;
   }
@@ -22229,6 +22269,26 @@ video {
     stroke: currentColor;
   }
 
+  .md\:stroke-w-0 {
+    stroke-width: 0;
+  }
+
+  .md\:stroke-w-1 {
+    stroke-width: 1px;
+  }
+
+  .md\:stroke-w-2 {
+    stroke-width: 2px;
+  }
+
+  .md\:stroke-w-3 {
+    stroke-width: 3px;
+  }
+
+  .md\:stroke-w-4 {
+    stroke-width: 4px;
+  }
+
   .md\:table-auto {
     table-layout: auto;
   }
@@ -29965,6 +30025,26 @@ video {
     stroke: currentColor;
   }
 
+  .lg\:stroke-w-0 {
+    stroke-width: 0;
+  }
+
+  .lg\:stroke-w-1 {
+    stroke-width: 1px;
+  }
+
+  .lg\:stroke-w-2 {
+    stroke-width: 2px;
+  }
+
+  .lg\:stroke-w-3 {
+    stroke-width: 3px;
+  }
+
+  .lg\:stroke-w-4 {
+    stroke-width: 4px;
+  }
+
   .lg\:table-auto {
     table-layout: auto;
   }
@@ -37701,6 +37781,26 @@ video {
     stroke: currentColor;
   }
 
+  .xl\:stroke-w-0 {
+    stroke-width: 0;
+  }
+
+  .xl\:stroke-w-1 {
+    stroke-width: 1px;
+  }
+
+  .xl\:stroke-w-2 {
+    stroke-width: 2px;
+  }
+
+  .xl\:stroke-w-3 {
+    stroke-width: 3px;
+  }
+
+  .xl\:stroke-w-4 {
+    stroke-width: 4px;
+  }
+
   .xl\:table-auto {
     table-layout: auto;
   }
diff --git a/__tests__/plugins/strokeWidth.test.js b/__tests__/plugins/strokeWidth.test.js
new file mode 100644
index 000000000..ade28e528
--- /dev/null
+++ b/__tests__/plugins/strokeWidth.test.js
@@ -0,0 +1,57 @@
+import _ from 'lodash'
+import escapeClassName from '../../src/util/escapeClassName'
+import plugin from '../../src/plugins/strokeWidth'
+
+test('the width of the stroke to be applied to the shape', () => {
+  const addedUtilities = []
+
+  const config = {
+    theme: {
+      strokeWidth: {
+        '0': '0',
+        '1': '1px',
+        '2': '2px',
+        '3': '3px',
+        '4': '4px',
+      },
+    },
+    variants: {
+      strokeWidth: ['responsive'],
+    },
+  }
+
+  const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue)
+  const pluginApi = {
+    config: getConfigValue,
+    e: escapeClassName,
+    theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue),
+    variants: (path, defaultValue) => {
+      if (_.isArray(config.variants)) {
+        return config.variants
+      }
+
+      return getConfigValue(`variants.${path}`, defaultValue)
+    },
+    addUtilities(utilities, variants) {
+      addedUtilities.push({
+        utilities,
+        variants,
+      })
+    },
+  }
+
+  plugin()(pluginApi)
+
+  expect(addedUtilities).toEqual([
+    {
+      utilities: {
+        '.stroke-w-0': { 'stroke-width': '0' },
+        '.stroke-w-1': { 'stroke-width': '1px' },
+        '.stroke-w-2': { 'stroke-width': '2px' },
+        '.stroke-w-3': { 'stroke-width': '3px' },
+        '.stroke-w-4': { 'stroke-width': '4px' },
+      },
+      variants: ['responsive'],
+    },
+  ])
+})
diff --git a/src/corePlugins.js b/src/corePlugins.js
index b0bf35235..a0fdb5d13 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -50,6 +50,7 @@ import resize from './plugins/resize'
 import boxShadow from './plugins/boxShadow'
 import fill from './plugins/fill'
 import stroke from './plugins/stroke'
+import strokeWidth from './plugins/strokeWidth'
 import tableLayout from './plugins/tableLayout'
 import textAlign from './plugins/textAlign'
 import textColor from './plugins/textColor'
@@ -123,6 +124,7 @@ export default function({ corePlugins: corePluginConfig }) {
     boxShadow,
     fill,
     stroke,
+    strokeWidth,
     tableLayout,
     textAlign,
     textColor,
diff --git a/src/plugins/strokeWidth.js b/src/plugins/strokeWidth.js
new file mode 100644
index 000000000..05a02a56a
--- /dev/null
+++ b/src/plugins/strokeWidth.js
@@ -0,0 +1,19 @@
+import _ from 'lodash'
+import flattenColorPalette from '../util/flattenColorPalette'
+
+export default function() {
+  return function({ addUtilities, e, theme, variants }) {
+    const utilities = _.fromPairs(
+      _.map(flattenColorPalette(theme('strokeWidth')), (value, modifier) => {
+        return [
+          `.${e(`stroke-w-${modifier}`)}`,
+          {
+            'stroke-width': value,
+          },
+        ]
+      })
+    )
+
+    addUtilities(utilities, variants('strokeWidth'))
+  }
+}
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index 193ab03fe..23609fd41 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -375,6 +375,13 @@ module.exports = {
     stroke: {
       current: 'currentColor',
     },
+    strokeWidth: {
+      '0': '0',      
+      '1': '1px',
+      '2': '2px',
+      '3': '3px',
+      '4': '4px',
+    },
     textColor: theme => theme('colors'),
     width: theme => ({
       auto: 'auto',
@@ -473,6 +480,7 @@ module.exports = {
     position: ['responsive'],
     resize: ['responsive'],
     stroke: ['responsive'],
+    strokeWidth: ['responsive'],
     tableLayout: ['responsive'],
     textAlign: ['responsive'],
     textColor: ['responsive', 'hover', 'focus'],

From d882d8d4fc5ee196ccfa51a08b4fff897f6258a6 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Tue, 24 Dec 2019 12:58:27 -0500
Subject: [PATCH 02/15] Add CSS grid utilities

---
 .../fixtures/tailwind-output-important.css    | 1780 +++++++++++++++++
 __tests__/fixtures/tailwind-output.css        | 1780 +++++++++++++++++
 src/corePlugins.js                            |   20 +
 src/plugins/display.js                        |    3 +
 src/plugins/gridColumn.js                     |    5 +
 src/plugins/gridColumnEnd.js                  |    5 +
 src/plugins/gridColumnGap.js                  |    5 +
 src/plugins/gridColumnStart.js                |    5 +
 src/plugins/gridRow.js                        |    5 +
 src/plugins/gridRowEnd.js                     |    5 +
 src/plugins/gridRowGap.js                     |    5 +
 src/plugins/gridRowStart.js                   |    5 +
 src/plugins/gridTemplateColumns.js            |    5 +
 src/plugins/gridTemplateRows.js               |    5 +
 stubs/defaultConfig.stub.js                   |   74 +
 15 files changed, 3707 insertions(+)
 create mode 100644 src/plugins/gridColumn.js
 create mode 100644 src/plugins/gridColumnEnd.js
 create mode 100644 src/plugins/gridColumnGap.js
 create mode 100644 src/plugins/gridColumnStart.js
 create mode 100644 src/plugins/gridRow.js
 create mode 100644 src/plugins/gridRowEnd.js
 create mode 100644 src/plugins/gridRowGap.js
 create mode 100644 src/plugins/gridRowStart.js
 create mode 100644 src/plugins/gridTemplateColumns.js
 create mode 100644 src/plugins/gridTemplateRows.js

diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index ba42c8d8d..e84815540 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -3347,6 +3347,10 @@ video {
   display: inline-flex !important;
 }
 
+.grid {
+  display: grid !important;
+}
+
 .table {
   display: table !important;
 }
@@ -8362,6 +8366,358 @@ video {
   z-index: auto !important;
 }
 
+.grid-cols-1 {
+  grid-template-columns: repeat(1, 1fr) !important;
+}
+
+.grid-cols-2 {
+  grid-template-columns: repeat(2, 1fr) !important;
+}
+
+.grid-cols-3 {
+  grid-template-columns: repeat(3, 1fr) !important;
+}
+
+.grid-cols-4 {
+  grid-template-columns: repeat(4, 1fr) !important;
+}
+
+.grid-cols-5 {
+  grid-template-columns: repeat(5, 1fr) !important;
+}
+
+.grid-cols-6 {
+  grid-template-columns: repeat(6, 1fr) !important;
+}
+
+.grid-cols-7 {
+  grid-template-columns: repeat(7, 1fr) !important;
+}
+
+.grid-cols-8 {
+  grid-template-columns: repeat(8, 1fr) !important;
+}
+
+.grid-cols-9 {
+  grid-template-columns: repeat(9, 1fr) !important;
+}
+
+.grid-cols-10 {
+  grid-template-columns: repeat(10, 1fr) !important;
+}
+
+.grid-cols-11 {
+  grid-template-columns: repeat(11, 1fr) !important;
+}
+
+.grid-cols-12 {
+  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;
+}
+
+.col-span-2 {
+  grid-column: span 2 / span 2 !important;
+}
+
+.col-span-3 {
+  grid-column: span 3 / span 3 !important;
+}
+
+.col-span-4 {
+  grid-column: span 4 / span 4 !important;
+}
+
+.col-span-5 {
+  grid-column: span 5 / span 5 !important;
+}
+
+.col-span-6 {
+  grid-column: span 6 / span 6 !important;
+}
+
+.col-span-7 {
+  grid-column: span 7 / span 7 !important;
+}
+
+.col-span-8 {
+  grid-column: span 8 / span 8 !important;
+}
+
+.col-span-9 {
+  grid-column: span 9 / span 9 !important;
+}
+
+.col-span-10 {
+  grid-column: span 10 / span 10 !important;
+}
+
+.col-span-11 {
+  grid-column: span 11 / span 11 !important;
+}
+
+.col-span-12 {
+  grid-column: span 12 / span 12 !important;
+}
+
+.col-start-1 {
+  grid-column-start: 1 !important;
+}
+
+.col-start-2 {
+  grid-column-start: 2 !important;
+}
+
+.col-start-3 {
+  grid-column-start: 3 !important;
+}
+
+.col-start-4 {
+  grid-column-start: 4 !important;
+}
+
+.col-start-5 {
+  grid-column-start: 5 !important;
+}
+
+.col-start-6 {
+  grid-column-start: 6 !important;
+}
+
+.col-start-7 {
+  grid-column-start: 7 !important;
+}
+
+.col-start-8 {
+  grid-column-start: 8 !important;
+}
+
+.col-start-9 {
+  grid-column-start: 9 !important;
+}
+
+.col-start-10 {
+  grid-column-start: 10 !important;
+}
+
+.col-start-11 {
+  grid-column-start: 11 !important;
+}
+
+.col-start-12 {
+  grid-column-start: 12 !important;
+}
+
+.col-start-13 {
+  grid-column-start: 13 !important;
+}
+
+.col-end-1 {
+  grid-column-end: 1 !important;
+}
+
+.col-end-2 {
+  grid-column-end: 2 !important;
+}
+
+.col-end-3 {
+  grid-column-end: 3 !important;
+}
+
+.col-end-4 {
+  grid-column-end: 4 !important;
+}
+
+.col-end-5 {
+  grid-column-end: 5 !important;
+}
+
+.col-end-6 {
+  grid-column-end: 6 !important;
+}
+
+.col-end-7 {
+  grid-column-end: 7 !important;
+}
+
+.col-end-8 {
+  grid-column-end: 8 !important;
+}
+
+.col-end-9 {
+  grid-column-end: 9 !important;
+}
+
+.col-end-10 {
+  grid-column-end: 10 !important;
+}
+
+.col-end-11 {
+  grid-column-end: 11 !important;
+}
+
+.col-end-12 {
+  grid-column-end: 12 !important;
+}
+
+.col-end-13 {
+  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;
@@ -12617,6 +12973,10 @@ video {
     display: inline-flex !important;
   }
 
+  .sm\:grid {
+    display: grid !important;
+  }
+
   .sm\:table {
     display: table !important;
   }
@@ -17632,6 +17992,358 @@ video {
     z-index: auto !important;
   }
 
+  .sm\:grid-cols-1 {
+    grid-template-columns: repeat(1, 1fr) !important;
+  }
+
+  .sm\:grid-cols-2 {
+    grid-template-columns: repeat(2, 1fr) !important;
+  }
+
+  .sm\:grid-cols-3 {
+    grid-template-columns: repeat(3, 1fr) !important;
+  }
+
+  .sm\:grid-cols-4 {
+    grid-template-columns: repeat(4, 1fr) !important;
+  }
+
+  .sm\:grid-cols-5 {
+    grid-template-columns: repeat(5, 1fr) !important;
+  }
+
+  .sm\:grid-cols-6 {
+    grid-template-columns: repeat(6, 1fr) !important;
+  }
+
+  .sm\:grid-cols-7 {
+    grid-template-columns: repeat(7, 1fr) !important;
+  }
+
+  .sm\:grid-cols-8 {
+    grid-template-columns: repeat(8, 1fr) !important;
+  }
+
+  .sm\:grid-cols-9 {
+    grid-template-columns: repeat(9, 1fr) !important;
+  }
+
+  .sm\:grid-cols-10 {
+    grid-template-columns: repeat(10, 1fr) !important;
+  }
+
+  .sm\:grid-cols-11 {
+    grid-template-columns: repeat(11, 1fr) !important;
+  }
+
+  .sm\:grid-cols-12 {
+    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;
+  }
+
+  .sm\:col-span-2 {
+    grid-column: span 2 / span 2 !important;
+  }
+
+  .sm\:col-span-3 {
+    grid-column: span 3 / span 3 !important;
+  }
+
+  .sm\:col-span-4 {
+    grid-column: span 4 / span 4 !important;
+  }
+
+  .sm\:col-span-5 {
+    grid-column: span 5 / span 5 !important;
+  }
+
+  .sm\:col-span-6 {
+    grid-column: span 6 / span 6 !important;
+  }
+
+  .sm\:col-span-7 {
+    grid-column: span 7 / span 7 !important;
+  }
+
+  .sm\:col-span-8 {
+    grid-column: span 8 / span 8 !important;
+  }
+
+  .sm\:col-span-9 {
+    grid-column: span 9 / span 9 !important;
+  }
+
+  .sm\:col-span-10 {
+    grid-column: span 10 / span 10 !important;
+  }
+
+  .sm\:col-span-11 {
+    grid-column: span 11 / span 11 !important;
+  }
+
+  .sm\:col-span-12 {
+    grid-column: span 12 / span 12 !important;
+  }
+
+  .sm\:col-start-1 {
+    grid-column-start: 1 !important;
+  }
+
+  .sm\:col-start-2 {
+    grid-column-start: 2 !important;
+  }
+
+  .sm\:col-start-3 {
+    grid-column-start: 3 !important;
+  }
+
+  .sm\:col-start-4 {
+    grid-column-start: 4 !important;
+  }
+
+  .sm\:col-start-5 {
+    grid-column-start: 5 !important;
+  }
+
+  .sm\:col-start-6 {
+    grid-column-start: 6 !important;
+  }
+
+  .sm\:col-start-7 {
+    grid-column-start: 7 !important;
+  }
+
+  .sm\:col-start-8 {
+    grid-column-start: 8 !important;
+  }
+
+  .sm\:col-start-9 {
+    grid-column-start: 9 !important;
+  }
+
+  .sm\:col-start-10 {
+    grid-column-start: 10 !important;
+  }
+
+  .sm\:col-start-11 {
+    grid-column-start: 11 !important;
+  }
+
+  .sm\:col-start-12 {
+    grid-column-start: 12 !important;
+  }
+
+  .sm\:col-start-13 {
+    grid-column-start: 13 !important;
+  }
+
+  .sm\:col-end-1 {
+    grid-column-end: 1 !important;
+  }
+
+  .sm\:col-end-2 {
+    grid-column-end: 2 !important;
+  }
+
+  .sm\:col-end-3 {
+    grid-column-end: 3 !important;
+  }
+
+  .sm\:col-end-4 {
+    grid-column-end: 4 !important;
+  }
+
+  .sm\:col-end-5 {
+    grid-column-end: 5 !important;
+  }
+
+  .sm\:col-end-6 {
+    grid-column-end: 6 !important;
+  }
+
+  .sm\:col-end-7 {
+    grid-column-end: 7 !important;
+  }
+
+  .sm\:col-end-8 {
+    grid-column-end: 8 !important;
+  }
+
+  .sm\:col-end-9 {
+    grid-column-end: 9 !important;
+  }
+
+  .sm\:col-end-10 {
+    grid-column-end: 10 !important;
+  }
+
+  .sm\:col-end-11 {
+    grid-column-end: 11 !important;
+  }
+
+  .sm\:col-end-12 {
+    grid-column-end: 12 !important;
+  }
+
+  .sm\:col-end-13 {
+    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;
@@ -21888,6 +22600,10 @@ video {
     display: inline-flex !important;
   }
 
+  .md\:grid {
+    display: grid !important;
+  }
+
   .md\:table {
     display: table !important;
   }
@@ -26903,6 +27619,358 @@ video {
     z-index: auto !important;
   }
 
+  .md\:grid-cols-1 {
+    grid-template-columns: repeat(1, 1fr) !important;
+  }
+
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, 1fr) !important;
+  }
+
+  .md\:grid-cols-3 {
+    grid-template-columns: repeat(3, 1fr) !important;
+  }
+
+  .md\:grid-cols-4 {
+    grid-template-columns: repeat(4, 1fr) !important;
+  }
+
+  .md\:grid-cols-5 {
+    grid-template-columns: repeat(5, 1fr) !important;
+  }
+
+  .md\:grid-cols-6 {
+    grid-template-columns: repeat(6, 1fr) !important;
+  }
+
+  .md\:grid-cols-7 {
+    grid-template-columns: repeat(7, 1fr) !important;
+  }
+
+  .md\:grid-cols-8 {
+    grid-template-columns: repeat(8, 1fr) !important;
+  }
+
+  .md\:grid-cols-9 {
+    grid-template-columns: repeat(9, 1fr) !important;
+  }
+
+  .md\:grid-cols-10 {
+    grid-template-columns: repeat(10, 1fr) !important;
+  }
+
+  .md\:grid-cols-11 {
+    grid-template-columns: repeat(11, 1fr) !important;
+  }
+
+  .md\:grid-cols-12 {
+    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;
+  }
+
+  .md\:col-span-2 {
+    grid-column: span 2 / span 2 !important;
+  }
+
+  .md\:col-span-3 {
+    grid-column: span 3 / span 3 !important;
+  }
+
+  .md\:col-span-4 {
+    grid-column: span 4 / span 4 !important;
+  }
+
+  .md\:col-span-5 {
+    grid-column: span 5 / span 5 !important;
+  }
+
+  .md\:col-span-6 {
+    grid-column: span 6 / span 6 !important;
+  }
+
+  .md\:col-span-7 {
+    grid-column: span 7 / span 7 !important;
+  }
+
+  .md\:col-span-8 {
+    grid-column: span 8 / span 8 !important;
+  }
+
+  .md\:col-span-9 {
+    grid-column: span 9 / span 9 !important;
+  }
+
+  .md\:col-span-10 {
+    grid-column: span 10 / span 10 !important;
+  }
+
+  .md\:col-span-11 {
+    grid-column: span 11 / span 11 !important;
+  }
+
+  .md\:col-span-12 {
+    grid-column: span 12 / span 12 !important;
+  }
+
+  .md\:col-start-1 {
+    grid-column-start: 1 !important;
+  }
+
+  .md\:col-start-2 {
+    grid-column-start: 2 !important;
+  }
+
+  .md\:col-start-3 {
+    grid-column-start: 3 !important;
+  }
+
+  .md\:col-start-4 {
+    grid-column-start: 4 !important;
+  }
+
+  .md\:col-start-5 {
+    grid-column-start: 5 !important;
+  }
+
+  .md\:col-start-6 {
+    grid-column-start: 6 !important;
+  }
+
+  .md\:col-start-7 {
+    grid-column-start: 7 !important;
+  }
+
+  .md\:col-start-8 {
+    grid-column-start: 8 !important;
+  }
+
+  .md\:col-start-9 {
+    grid-column-start: 9 !important;
+  }
+
+  .md\:col-start-10 {
+    grid-column-start: 10 !important;
+  }
+
+  .md\:col-start-11 {
+    grid-column-start: 11 !important;
+  }
+
+  .md\:col-start-12 {
+    grid-column-start: 12 !important;
+  }
+
+  .md\:col-start-13 {
+    grid-column-start: 13 !important;
+  }
+
+  .md\:col-end-1 {
+    grid-column-end: 1 !important;
+  }
+
+  .md\:col-end-2 {
+    grid-column-end: 2 !important;
+  }
+
+  .md\:col-end-3 {
+    grid-column-end: 3 !important;
+  }
+
+  .md\:col-end-4 {
+    grid-column-end: 4 !important;
+  }
+
+  .md\:col-end-5 {
+    grid-column-end: 5 !important;
+  }
+
+  .md\:col-end-6 {
+    grid-column-end: 6 !important;
+  }
+
+  .md\:col-end-7 {
+    grid-column-end: 7 !important;
+  }
+
+  .md\:col-end-8 {
+    grid-column-end: 8 !important;
+  }
+
+  .md\:col-end-9 {
+    grid-column-end: 9 !important;
+  }
+
+  .md\:col-end-10 {
+    grid-column-end: 10 !important;
+  }
+
+  .md\:col-end-11 {
+    grid-column-end: 11 !important;
+  }
+
+  .md\:col-end-12 {
+    grid-column-end: 12 !important;
+  }
+
+  .md\:col-end-13 {
+    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;
@@ -31159,6 +32227,10 @@ video {
     display: inline-flex !important;
   }
 
+  .lg\:grid {
+    display: grid !important;
+  }
+
   .lg\:table {
     display: table !important;
   }
@@ -36174,6 +37246,358 @@ video {
     z-index: auto !important;
   }
 
+  .lg\:grid-cols-1 {
+    grid-template-columns: repeat(1, 1fr) !important;
+  }
+
+  .lg\:grid-cols-2 {
+    grid-template-columns: repeat(2, 1fr) !important;
+  }
+
+  .lg\:grid-cols-3 {
+    grid-template-columns: repeat(3, 1fr) !important;
+  }
+
+  .lg\:grid-cols-4 {
+    grid-template-columns: repeat(4, 1fr) !important;
+  }
+
+  .lg\:grid-cols-5 {
+    grid-template-columns: repeat(5, 1fr) !important;
+  }
+
+  .lg\:grid-cols-6 {
+    grid-template-columns: repeat(6, 1fr) !important;
+  }
+
+  .lg\:grid-cols-7 {
+    grid-template-columns: repeat(7, 1fr) !important;
+  }
+
+  .lg\:grid-cols-8 {
+    grid-template-columns: repeat(8, 1fr) !important;
+  }
+
+  .lg\:grid-cols-9 {
+    grid-template-columns: repeat(9, 1fr) !important;
+  }
+
+  .lg\:grid-cols-10 {
+    grid-template-columns: repeat(10, 1fr) !important;
+  }
+
+  .lg\:grid-cols-11 {
+    grid-template-columns: repeat(11, 1fr) !important;
+  }
+
+  .lg\:grid-cols-12 {
+    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;
+  }
+
+  .lg\:col-span-2 {
+    grid-column: span 2 / span 2 !important;
+  }
+
+  .lg\:col-span-3 {
+    grid-column: span 3 / span 3 !important;
+  }
+
+  .lg\:col-span-4 {
+    grid-column: span 4 / span 4 !important;
+  }
+
+  .lg\:col-span-5 {
+    grid-column: span 5 / span 5 !important;
+  }
+
+  .lg\:col-span-6 {
+    grid-column: span 6 / span 6 !important;
+  }
+
+  .lg\:col-span-7 {
+    grid-column: span 7 / span 7 !important;
+  }
+
+  .lg\:col-span-8 {
+    grid-column: span 8 / span 8 !important;
+  }
+
+  .lg\:col-span-9 {
+    grid-column: span 9 / span 9 !important;
+  }
+
+  .lg\:col-span-10 {
+    grid-column: span 10 / span 10 !important;
+  }
+
+  .lg\:col-span-11 {
+    grid-column: span 11 / span 11 !important;
+  }
+
+  .lg\:col-span-12 {
+    grid-column: span 12 / span 12 !important;
+  }
+
+  .lg\:col-start-1 {
+    grid-column-start: 1 !important;
+  }
+
+  .lg\:col-start-2 {
+    grid-column-start: 2 !important;
+  }
+
+  .lg\:col-start-3 {
+    grid-column-start: 3 !important;
+  }
+
+  .lg\:col-start-4 {
+    grid-column-start: 4 !important;
+  }
+
+  .lg\:col-start-5 {
+    grid-column-start: 5 !important;
+  }
+
+  .lg\:col-start-6 {
+    grid-column-start: 6 !important;
+  }
+
+  .lg\:col-start-7 {
+    grid-column-start: 7 !important;
+  }
+
+  .lg\:col-start-8 {
+    grid-column-start: 8 !important;
+  }
+
+  .lg\:col-start-9 {
+    grid-column-start: 9 !important;
+  }
+
+  .lg\:col-start-10 {
+    grid-column-start: 10 !important;
+  }
+
+  .lg\:col-start-11 {
+    grid-column-start: 11 !important;
+  }
+
+  .lg\:col-start-12 {
+    grid-column-start: 12 !important;
+  }
+
+  .lg\:col-start-13 {
+    grid-column-start: 13 !important;
+  }
+
+  .lg\:col-end-1 {
+    grid-column-end: 1 !important;
+  }
+
+  .lg\:col-end-2 {
+    grid-column-end: 2 !important;
+  }
+
+  .lg\:col-end-3 {
+    grid-column-end: 3 !important;
+  }
+
+  .lg\:col-end-4 {
+    grid-column-end: 4 !important;
+  }
+
+  .lg\:col-end-5 {
+    grid-column-end: 5 !important;
+  }
+
+  .lg\:col-end-6 {
+    grid-column-end: 6 !important;
+  }
+
+  .lg\:col-end-7 {
+    grid-column-end: 7 !important;
+  }
+
+  .lg\:col-end-8 {
+    grid-column-end: 8 !important;
+  }
+
+  .lg\:col-end-9 {
+    grid-column-end: 9 !important;
+  }
+
+  .lg\:col-end-10 {
+    grid-column-end: 10 !important;
+  }
+
+  .lg\:col-end-11 {
+    grid-column-end: 11 !important;
+  }
+
+  .lg\:col-end-12 {
+    grid-column-end: 12 !important;
+  }
+
+  .lg\:col-end-13 {
+    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;
@@ -40430,6 +41854,10 @@ video {
     display: inline-flex !important;
   }
 
+  .xl\:grid {
+    display: grid !important;
+  }
+
   .xl\:table {
     display: table !important;
   }
@@ -45445,6 +46873,358 @@ video {
     z-index: auto !important;
   }
 
+  .xl\:grid-cols-1 {
+    grid-template-columns: repeat(1, 1fr) !important;
+  }
+
+  .xl\:grid-cols-2 {
+    grid-template-columns: repeat(2, 1fr) !important;
+  }
+
+  .xl\:grid-cols-3 {
+    grid-template-columns: repeat(3, 1fr) !important;
+  }
+
+  .xl\:grid-cols-4 {
+    grid-template-columns: repeat(4, 1fr) !important;
+  }
+
+  .xl\:grid-cols-5 {
+    grid-template-columns: repeat(5, 1fr) !important;
+  }
+
+  .xl\:grid-cols-6 {
+    grid-template-columns: repeat(6, 1fr) !important;
+  }
+
+  .xl\:grid-cols-7 {
+    grid-template-columns: repeat(7, 1fr) !important;
+  }
+
+  .xl\:grid-cols-8 {
+    grid-template-columns: repeat(8, 1fr) !important;
+  }
+
+  .xl\:grid-cols-9 {
+    grid-template-columns: repeat(9, 1fr) !important;
+  }
+
+  .xl\:grid-cols-10 {
+    grid-template-columns: repeat(10, 1fr) !important;
+  }
+
+  .xl\:grid-cols-11 {
+    grid-template-columns: repeat(11, 1fr) !important;
+  }
+
+  .xl\:grid-cols-12 {
+    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;
+  }
+
+  .xl\:col-span-2 {
+    grid-column: span 2 / span 2 !important;
+  }
+
+  .xl\:col-span-3 {
+    grid-column: span 3 / span 3 !important;
+  }
+
+  .xl\:col-span-4 {
+    grid-column: span 4 / span 4 !important;
+  }
+
+  .xl\:col-span-5 {
+    grid-column: span 5 / span 5 !important;
+  }
+
+  .xl\:col-span-6 {
+    grid-column: span 6 / span 6 !important;
+  }
+
+  .xl\:col-span-7 {
+    grid-column: span 7 / span 7 !important;
+  }
+
+  .xl\:col-span-8 {
+    grid-column: span 8 / span 8 !important;
+  }
+
+  .xl\:col-span-9 {
+    grid-column: span 9 / span 9 !important;
+  }
+
+  .xl\:col-span-10 {
+    grid-column: span 10 / span 10 !important;
+  }
+
+  .xl\:col-span-11 {
+    grid-column: span 11 / span 11 !important;
+  }
+
+  .xl\:col-span-12 {
+    grid-column: span 12 / span 12 !important;
+  }
+
+  .xl\:col-start-1 {
+    grid-column-start: 1 !important;
+  }
+
+  .xl\:col-start-2 {
+    grid-column-start: 2 !important;
+  }
+
+  .xl\:col-start-3 {
+    grid-column-start: 3 !important;
+  }
+
+  .xl\:col-start-4 {
+    grid-column-start: 4 !important;
+  }
+
+  .xl\:col-start-5 {
+    grid-column-start: 5 !important;
+  }
+
+  .xl\:col-start-6 {
+    grid-column-start: 6 !important;
+  }
+
+  .xl\:col-start-7 {
+    grid-column-start: 7 !important;
+  }
+
+  .xl\:col-start-8 {
+    grid-column-start: 8 !important;
+  }
+
+  .xl\:col-start-9 {
+    grid-column-start: 9 !important;
+  }
+
+  .xl\:col-start-10 {
+    grid-column-start: 10 !important;
+  }
+
+  .xl\:col-start-11 {
+    grid-column-start: 11 !important;
+  }
+
+  .xl\:col-start-12 {
+    grid-column-start: 12 !important;
+  }
+
+  .xl\:col-start-13 {
+    grid-column-start: 13 !important;
+  }
+
+  .xl\:col-end-1 {
+    grid-column-end: 1 !important;
+  }
+
+  .xl\:col-end-2 {
+    grid-column-end: 2 !important;
+  }
+
+  .xl\:col-end-3 {
+    grid-column-end: 3 !important;
+  }
+
+  .xl\:col-end-4 {
+    grid-column-end: 4 !important;
+  }
+
+  .xl\:col-end-5 {
+    grid-column-end: 5 !important;
+  }
+
+  .xl\:col-end-6 {
+    grid-column-end: 6 !important;
+  }
+
+  .xl\:col-end-7 {
+    grid-column-end: 7 !important;
+  }
+
+  .xl\:col-end-8 {
+    grid-column-end: 8 !important;
+  }
+
+  .xl\:col-end-9 {
+    grid-column-end: 9 !important;
+  }
+
+  .xl\:col-end-10 {
+    grid-column-end: 10 !important;
+  }
+
+  .xl\:col-end-11 {
+    grid-column-end: 11 !important;
+  }
+
+  .xl\:col-end-12 {
+    grid-column-end: 12 !important;
+  }
+
+  .xl\:col-end-13 {
+    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 05a1c8b4f..d7741d7e2 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -3347,6 +3347,10 @@ video {
   display: inline-flex;
 }
 
+.grid {
+  display: grid;
+}
+
 .table {
   display: table;
 }
@@ -8362,6 +8366,358 @@ video {
   z-index: auto;
 }
 
+.grid-cols-1 {
+  grid-template-columns: repeat(1, 1fr);
+}
+
+.grid-cols-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.grid-cols-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.grid-cols-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.grid-cols-5 {
+  grid-template-columns: repeat(5, 1fr);
+}
+
+.grid-cols-6 {
+  grid-template-columns: repeat(6, 1fr);
+}
+
+.grid-cols-7 {
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.grid-cols-8 {
+  grid-template-columns: repeat(8, 1fr);
+}
+
+.grid-cols-9 {
+  grid-template-columns: repeat(9, 1fr);
+}
+
+.grid-cols-10 {
+  grid-template-columns: repeat(10, 1fr);
+}
+
+.grid-cols-11 {
+  grid-template-columns: repeat(11, 1fr);
+}
+
+.grid-cols-12 {
+  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;
+}
+
+.col-span-2 {
+  grid-column: span 2 / span 2;
+}
+
+.col-span-3 {
+  grid-column: span 3 / span 3;
+}
+
+.col-span-4 {
+  grid-column: span 4 / span 4;
+}
+
+.col-span-5 {
+  grid-column: span 5 / span 5;
+}
+
+.col-span-6 {
+  grid-column: span 6 / span 6;
+}
+
+.col-span-7 {
+  grid-column: span 7 / span 7;
+}
+
+.col-span-8 {
+  grid-column: span 8 / span 8;
+}
+
+.col-span-9 {
+  grid-column: span 9 / span 9;
+}
+
+.col-span-10 {
+  grid-column: span 10 / span 10;
+}
+
+.col-span-11 {
+  grid-column: span 11 / span 11;
+}
+
+.col-span-12 {
+  grid-column: span 12 / span 12;
+}
+
+.col-start-1 {
+  grid-column-start: 1;
+}
+
+.col-start-2 {
+  grid-column-start: 2;
+}
+
+.col-start-3 {
+  grid-column-start: 3;
+}
+
+.col-start-4 {
+  grid-column-start: 4;
+}
+
+.col-start-5 {
+  grid-column-start: 5;
+}
+
+.col-start-6 {
+  grid-column-start: 6;
+}
+
+.col-start-7 {
+  grid-column-start: 7;
+}
+
+.col-start-8 {
+  grid-column-start: 8;
+}
+
+.col-start-9 {
+  grid-column-start: 9;
+}
+
+.col-start-10 {
+  grid-column-start: 10;
+}
+
+.col-start-11 {
+  grid-column-start: 11;
+}
+
+.col-start-12 {
+  grid-column-start: 12;
+}
+
+.col-start-13 {
+  grid-column-start: 13;
+}
+
+.col-end-1 {
+  grid-column-end: 1;
+}
+
+.col-end-2 {
+  grid-column-end: 2;
+}
+
+.col-end-3 {
+  grid-column-end: 3;
+}
+
+.col-end-4 {
+  grid-column-end: 4;
+}
+
+.col-end-5 {
+  grid-column-end: 5;
+}
+
+.col-end-6 {
+  grid-column-end: 6;
+}
+
+.col-end-7 {
+  grid-column-end: 7;
+}
+
+.col-end-8 {
+  grid-column-end: 8;
+}
+
+.col-end-9 {
+  grid-column-end: 9;
+}
+
+.col-end-10 {
+  grid-column-end: 10;
+}
+
+.col-end-11 {
+  grid-column-end: 11;
+}
+
+.col-end-12 {
+  grid-column-end: 12;
+}
+
+.col-end-13 {
+  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;
@@ -12617,6 +12973,10 @@ video {
     display: inline-flex;
   }
 
+  .sm\:grid {
+    display: grid;
+  }
+
   .sm\:table {
     display: table;
   }
@@ -17632,6 +17992,358 @@ video {
     z-index: auto;
   }
 
+  .sm\:grid-cols-1 {
+    grid-template-columns: repeat(1, 1fr);
+  }
+
+  .sm\:grid-cols-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .sm\:grid-cols-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .sm\:grid-cols-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .sm\:grid-cols-5 {
+    grid-template-columns: repeat(5, 1fr);
+  }
+
+  .sm\:grid-cols-6 {
+    grid-template-columns: repeat(6, 1fr);
+  }
+
+  .sm\:grid-cols-7 {
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  .sm\:grid-cols-8 {
+    grid-template-columns: repeat(8, 1fr);
+  }
+
+  .sm\:grid-cols-9 {
+    grid-template-columns: repeat(9, 1fr);
+  }
+
+  .sm\:grid-cols-10 {
+    grid-template-columns: repeat(10, 1fr);
+  }
+
+  .sm\:grid-cols-11 {
+    grid-template-columns: repeat(11, 1fr);
+  }
+
+  .sm\:grid-cols-12 {
+    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;
+  }
+
+  .sm\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+
+  .sm\:col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+
+  .sm\:col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+
+  .sm\:col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+
+  .sm\:col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+
+  .sm\:col-span-7 {
+    grid-column: span 7 / span 7;
+  }
+
+  .sm\:col-span-8 {
+    grid-column: span 8 / span 8;
+  }
+
+  .sm\:col-span-9 {
+    grid-column: span 9 / span 9;
+  }
+
+  .sm\:col-span-10 {
+    grid-column: span 10 / span 10;
+  }
+
+  .sm\:col-span-11 {
+    grid-column: span 11 / span 11;
+  }
+
+  .sm\:col-span-12 {
+    grid-column: span 12 / span 12;
+  }
+
+  .sm\:col-start-1 {
+    grid-column-start: 1;
+  }
+
+  .sm\:col-start-2 {
+    grid-column-start: 2;
+  }
+
+  .sm\:col-start-3 {
+    grid-column-start: 3;
+  }
+
+  .sm\:col-start-4 {
+    grid-column-start: 4;
+  }
+
+  .sm\:col-start-5 {
+    grid-column-start: 5;
+  }
+
+  .sm\:col-start-6 {
+    grid-column-start: 6;
+  }
+
+  .sm\:col-start-7 {
+    grid-column-start: 7;
+  }
+
+  .sm\:col-start-8 {
+    grid-column-start: 8;
+  }
+
+  .sm\:col-start-9 {
+    grid-column-start: 9;
+  }
+
+  .sm\:col-start-10 {
+    grid-column-start: 10;
+  }
+
+  .sm\:col-start-11 {
+    grid-column-start: 11;
+  }
+
+  .sm\:col-start-12 {
+    grid-column-start: 12;
+  }
+
+  .sm\:col-start-13 {
+    grid-column-start: 13;
+  }
+
+  .sm\:col-end-1 {
+    grid-column-end: 1;
+  }
+
+  .sm\:col-end-2 {
+    grid-column-end: 2;
+  }
+
+  .sm\:col-end-3 {
+    grid-column-end: 3;
+  }
+
+  .sm\:col-end-4 {
+    grid-column-end: 4;
+  }
+
+  .sm\:col-end-5 {
+    grid-column-end: 5;
+  }
+
+  .sm\:col-end-6 {
+    grid-column-end: 6;
+  }
+
+  .sm\:col-end-7 {
+    grid-column-end: 7;
+  }
+
+  .sm\:col-end-8 {
+    grid-column-end: 8;
+  }
+
+  .sm\:col-end-9 {
+    grid-column-end: 9;
+  }
+
+  .sm\:col-end-10 {
+    grid-column-end: 10;
+  }
+
+  .sm\:col-end-11 {
+    grid-column-end: 11;
+  }
+
+  .sm\:col-end-12 {
+    grid-column-end: 12;
+  }
+
+  .sm\:col-end-13 {
+    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;
@@ -21888,6 +22600,10 @@ video {
     display: inline-flex;
   }
 
+  .md\:grid {
+    display: grid;
+  }
+
   .md\:table {
     display: table;
   }
@@ -26903,6 +27619,358 @@ video {
     z-index: auto;
   }
 
+  .md\:grid-cols-1 {
+    grid-template-columns: repeat(1, 1fr);
+  }
+
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .md\:grid-cols-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .md\:grid-cols-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .md\:grid-cols-5 {
+    grid-template-columns: repeat(5, 1fr);
+  }
+
+  .md\:grid-cols-6 {
+    grid-template-columns: repeat(6, 1fr);
+  }
+
+  .md\:grid-cols-7 {
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  .md\:grid-cols-8 {
+    grid-template-columns: repeat(8, 1fr);
+  }
+
+  .md\:grid-cols-9 {
+    grid-template-columns: repeat(9, 1fr);
+  }
+
+  .md\:grid-cols-10 {
+    grid-template-columns: repeat(10, 1fr);
+  }
+
+  .md\:grid-cols-11 {
+    grid-template-columns: repeat(11, 1fr);
+  }
+
+  .md\:grid-cols-12 {
+    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;
+  }
+
+  .md\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+
+  .md\:col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+
+  .md\:col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+
+  .md\:col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+
+  .md\:col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+
+  .md\:col-span-7 {
+    grid-column: span 7 / span 7;
+  }
+
+  .md\:col-span-8 {
+    grid-column: span 8 / span 8;
+  }
+
+  .md\:col-span-9 {
+    grid-column: span 9 / span 9;
+  }
+
+  .md\:col-span-10 {
+    grid-column: span 10 / span 10;
+  }
+
+  .md\:col-span-11 {
+    grid-column: span 11 / span 11;
+  }
+
+  .md\:col-span-12 {
+    grid-column: span 12 / span 12;
+  }
+
+  .md\:col-start-1 {
+    grid-column-start: 1;
+  }
+
+  .md\:col-start-2 {
+    grid-column-start: 2;
+  }
+
+  .md\:col-start-3 {
+    grid-column-start: 3;
+  }
+
+  .md\:col-start-4 {
+    grid-column-start: 4;
+  }
+
+  .md\:col-start-5 {
+    grid-column-start: 5;
+  }
+
+  .md\:col-start-6 {
+    grid-column-start: 6;
+  }
+
+  .md\:col-start-7 {
+    grid-column-start: 7;
+  }
+
+  .md\:col-start-8 {
+    grid-column-start: 8;
+  }
+
+  .md\:col-start-9 {
+    grid-column-start: 9;
+  }
+
+  .md\:col-start-10 {
+    grid-column-start: 10;
+  }
+
+  .md\:col-start-11 {
+    grid-column-start: 11;
+  }
+
+  .md\:col-start-12 {
+    grid-column-start: 12;
+  }
+
+  .md\:col-start-13 {
+    grid-column-start: 13;
+  }
+
+  .md\:col-end-1 {
+    grid-column-end: 1;
+  }
+
+  .md\:col-end-2 {
+    grid-column-end: 2;
+  }
+
+  .md\:col-end-3 {
+    grid-column-end: 3;
+  }
+
+  .md\:col-end-4 {
+    grid-column-end: 4;
+  }
+
+  .md\:col-end-5 {
+    grid-column-end: 5;
+  }
+
+  .md\:col-end-6 {
+    grid-column-end: 6;
+  }
+
+  .md\:col-end-7 {
+    grid-column-end: 7;
+  }
+
+  .md\:col-end-8 {
+    grid-column-end: 8;
+  }
+
+  .md\:col-end-9 {
+    grid-column-end: 9;
+  }
+
+  .md\:col-end-10 {
+    grid-column-end: 10;
+  }
+
+  .md\:col-end-11 {
+    grid-column-end: 11;
+  }
+
+  .md\:col-end-12 {
+    grid-column-end: 12;
+  }
+
+  .md\:col-end-13 {
+    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;
@@ -31159,6 +32227,10 @@ video {
     display: inline-flex;
   }
 
+  .lg\:grid {
+    display: grid;
+  }
+
   .lg\:table {
     display: table;
   }
@@ -36174,6 +37246,358 @@ video {
     z-index: auto;
   }
 
+  .lg\:grid-cols-1 {
+    grid-template-columns: repeat(1, 1fr);
+  }
+
+  .lg\:grid-cols-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .lg\:grid-cols-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .lg\:grid-cols-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .lg\:grid-cols-5 {
+    grid-template-columns: repeat(5, 1fr);
+  }
+
+  .lg\:grid-cols-6 {
+    grid-template-columns: repeat(6, 1fr);
+  }
+
+  .lg\:grid-cols-7 {
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  .lg\:grid-cols-8 {
+    grid-template-columns: repeat(8, 1fr);
+  }
+
+  .lg\:grid-cols-9 {
+    grid-template-columns: repeat(9, 1fr);
+  }
+
+  .lg\:grid-cols-10 {
+    grid-template-columns: repeat(10, 1fr);
+  }
+
+  .lg\:grid-cols-11 {
+    grid-template-columns: repeat(11, 1fr);
+  }
+
+  .lg\:grid-cols-12 {
+    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;
+  }
+
+  .lg\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+
+  .lg\:col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+
+  .lg\:col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+
+  .lg\:col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+
+  .lg\:col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+
+  .lg\:col-span-7 {
+    grid-column: span 7 / span 7;
+  }
+
+  .lg\:col-span-8 {
+    grid-column: span 8 / span 8;
+  }
+
+  .lg\:col-span-9 {
+    grid-column: span 9 / span 9;
+  }
+
+  .lg\:col-span-10 {
+    grid-column: span 10 / span 10;
+  }
+
+  .lg\:col-span-11 {
+    grid-column: span 11 / span 11;
+  }
+
+  .lg\:col-span-12 {
+    grid-column: span 12 / span 12;
+  }
+
+  .lg\:col-start-1 {
+    grid-column-start: 1;
+  }
+
+  .lg\:col-start-2 {
+    grid-column-start: 2;
+  }
+
+  .lg\:col-start-3 {
+    grid-column-start: 3;
+  }
+
+  .lg\:col-start-4 {
+    grid-column-start: 4;
+  }
+
+  .lg\:col-start-5 {
+    grid-column-start: 5;
+  }
+
+  .lg\:col-start-6 {
+    grid-column-start: 6;
+  }
+
+  .lg\:col-start-7 {
+    grid-column-start: 7;
+  }
+
+  .lg\:col-start-8 {
+    grid-column-start: 8;
+  }
+
+  .lg\:col-start-9 {
+    grid-column-start: 9;
+  }
+
+  .lg\:col-start-10 {
+    grid-column-start: 10;
+  }
+
+  .lg\:col-start-11 {
+    grid-column-start: 11;
+  }
+
+  .lg\:col-start-12 {
+    grid-column-start: 12;
+  }
+
+  .lg\:col-start-13 {
+    grid-column-start: 13;
+  }
+
+  .lg\:col-end-1 {
+    grid-column-end: 1;
+  }
+
+  .lg\:col-end-2 {
+    grid-column-end: 2;
+  }
+
+  .lg\:col-end-3 {
+    grid-column-end: 3;
+  }
+
+  .lg\:col-end-4 {
+    grid-column-end: 4;
+  }
+
+  .lg\:col-end-5 {
+    grid-column-end: 5;
+  }
+
+  .lg\:col-end-6 {
+    grid-column-end: 6;
+  }
+
+  .lg\:col-end-7 {
+    grid-column-end: 7;
+  }
+
+  .lg\:col-end-8 {
+    grid-column-end: 8;
+  }
+
+  .lg\:col-end-9 {
+    grid-column-end: 9;
+  }
+
+  .lg\:col-end-10 {
+    grid-column-end: 10;
+  }
+
+  .lg\:col-end-11 {
+    grid-column-end: 11;
+  }
+
+  .lg\:col-end-12 {
+    grid-column-end: 12;
+  }
+
+  .lg\:col-end-13 {
+    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;
@@ -40430,6 +41854,10 @@ video {
     display: inline-flex;
   }
 
+  .xl\:grid {
+    display: grid;
+  }
+
   .xl\:table {
     display: table;
   }
@@ -45445,6 +46873,358 @@ video {
     z-index: auto;
   }
 
+  .xl\:grid-cols-1 {
+    grid-template-columns: repeat(1, 1fr);
+  }
+
+  .xl\:grid-cols-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .xl\:grid-cols-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .xl\:grid-cols-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .xl\:grid-cols-5 {
+    grid-template-columns: repeat(5, 1fr);
+  }
+
+  .xl\:grid-cols-6 {
+    grid-template-columns: repeat(6, 1fr);
+  }
+
+  .xl\:grid-cols-7 {
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  .xl\:grid-cols-8 {
+    grid-template-columns: repeat(8, 1fr);
+  }
+
+  .xl\:grid-cols-9 {
+    grid-template-columns: repeat(9, 1fr);
+  }
+
+  .xl\:grid-cols-10 {
+    grid-template-columns: repeat(10, 1fr);
+  }
+
+  .xl\:grid-cols-11 {
+    grid-template-columns: repeat(11, 1fr);
+  }
+
+  .xl\:grid-cols-12 {
+    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;
+  }
+
+  .xl\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+
+  .xl\:col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+
+  .xl\:col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+
+  .xl\:col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+
+  .xl\:col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+
+  .xl\:col-span-7 {
+    grid-column: span 7 / span 7;
+  }
+
+  .xl\:col-span-8 {
+    grid-column: span 8 / span 8;
+  }
+
+  .xl\:col-span-9 {
+    grid-column: span 9 / span 9;
+  }
+
+  .xl\:col-span-10 {
+    grid-column: span 10 / span 10;
+  }
+
+  .xl\:col-span-11 {
+    grid-column: span 11 / span 11;
+  }
+
+  .xl\:col-span-12 {
+    grid-column: span 12 / span 12;
+  }
+
+  .xl\:col-start-1 {
+    grid-column-start: 1;
+  }
+
+  .xl\:col-start-2 {
+    grid-column-start: 2;
+  }
+
+  .xl\:col-start-3 {
+    grid-column-start: 3;
+  }
+
+  .xl\:col-start-4 {
+    grid-column-start: 4;
+  }
+
+  .xl\:col-start-5 {
+    grid-column-start: 5;
+  }
+
+  .xl\:col-start-6 {
+    grid-column-start: 6;
+  }
+
+  .xl\:col-start-7 {
+    grid-column-start: 7;
+  }
+
+  .xl\:col-start-8 {
+    grid-column-start: 8;
+  }
+
+  .xl\:col-start-9 {
+    grid-column-start: 9;
+  }
+
+  .xl\:col-start-10 {
+    grid-column-start: 10;
+  }
+
+  .xl\:col-start-11 {
+    grid-column-start: 11;
+  }
+
+  .xl\:col-start-12 {
+    grid-column-start: 12;
+  }
+
+  .xl\:col-start-13 {
+    grid-column-start: 13;
+  }
+
+  .xl\:col-end-1 {
+    grid-column-end: 1;
+  }
+
+  .xl\:col-end-2 {
+    grid-column-end: 2;
+  }
+
+  .xl\:col-end-3 {
+    grid-column-end: 3;
+  }
+
+  .xl\:col-end-4 {
+    grid-column-end: 4;
+  }
+
+  .xl\:col-end-5 {
+    grid-column-end: 5;
+  }
+
+  .xl\:col-end-6 {
+    grid-column-end: 6;
+  }
+
+  .xl\:col-end-7 {
+    grid-column-end: 7;
+  }
+
+  .xl\:col-end-8 {
+    grid-column-end: 8;
+  }
+
+  .xl\:col-end-9 {
+    grid-column-end: 9;
+  }
+
+  .xl\:col-end-10 {
+    grid-column-end: 10;
+  }
+
+  .xl\:col-end-11 {
+    grid-column-end: 11;
+  }
+
+  .xl\:col-end-12 {
+    grid-column-end: 12;
+  }
+
+  .xl\:col-end-13 {
+    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 ce71b7f51..27cfc9bbf 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -71,6 +71,16 @@ import transformOrigin from './plugins/transformOrigin'
 import scale from './plugins/scale'
 import rotate from './plugins/rotate'
 import translate from './plugins/translate'
+import gridTemplateColumns from './plugins/gridTemplateColumns'
+import gridColumnGap from './plugins/gridColumnGap'
+import gridColumn from './plugins/gridColumn'
+import gridColumnStart from './plugins/gridColumnStart'
+import gridColumnEnd from './plugins/gridColumnEnd'
+import gridTemplateRows from './plugins/gridTemplateRows'
+import gridRowGap from './plugins/gridRowGap'
+import gridRow from './plugins/gridRow'
+import gridRowStart from './plugins/gridRowStart'
+import gridRowEnd from './plugins/gridRowEnd'
 
 import configurePlugins from './util/configurePlugins'
 
@@ -144,6 +154,16 @@ export default function({ corePlugins: corePluginConfig }) {
     wordBreak,
     width,
     zIndex,
+    gridTemplateColumns,
+    gridColumnGap,
+    gridColumn,
+    gridColumnStart,
+    gridColumnEnd,
+    gridTemplateRows,
+    gridRowGap,
+    gridRow,
+    gridRowStart,
+    gridRowEnd,
     transform,
     transformOrigin,
     scale,
diff --git a/src/plugins/display.js b/src/plugins/display.js
index b199f4dd0..41507755d 100644
--- a/src/plugins/display.js
+++ b/src/plugins/display.js
@@ -17,6 +17,9 @@ export default function() {
         '.inline-flex': {
           display: 'inline-flex',
         },
+        '.grid': {
+          display: 'grid',
+        },
         '.table': {
           display: 'table',
         },
diff --git a/src/plugins/gridColumn.js b/src/plugins/gridColumn.js
new file mode 100644
index 000000000..107538718
--- /dev/null
+++ b/src/plugins/gridColumn.js
@@ -0,0 +1,5 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function() {
+  return createUtilityPlugin('gridColumn', [['col', ['gridColumn']]])
+}
diff --git a/src/plugins/gridColumnEnd.js b/src/plugins/gridColumnEnd.js
new file mode 100644
index 000000000..d483227f7
--- /dev/null
+++ b/src/plugins/gridColumnEnd.js
@@ -0,0 +1,5 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function() {
+  return createUtilityPlugin('gridColumnEnd', [['col-end', ['gridColumnEnd']]])
+}
diff --git a/src/plugins/gridColumnGap.js b/src/plugins/gridColumnGap.js
new file mode 100644
index 000000000..0a309687a
--- /dev/null
+++ b/src/plugins/gridColumnGap.js
@@ -0,0 +1,5 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function() {
+  return createUtilityPlugin('gridColumnGap', [['col-gap', ['gridColumnGap']]])
+}
diff --git a/src/plugins/gridColumnStart.js b/src/plugins/gridColumnStart.js
new file mode 100644
index 000000000..dc3f997d8
--- /dev/null
+++ b/src/plugins/gridColumnStart.js
@@ -0,0 +1,5 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function() {
+  return createUtilityPlugin('gridColumnStart', [['col-start', ['gridColumnStart']]])
+}
diff --git a/src/plugins/gridRow.js b/src/plugins/gridRow.js
new file mode 100644
index 000000000..d89529bd5
--- /dev/null
+++ b/src/plugins/gridRow.js
@@ -0,0 +1,5 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function() {
+  return createUtilityPlugin('gridRow', [['row', ['gridRow']]])
+}
diff --git a/src/plugins/gridRowEnd.js b/src/plugins/gridRowEnd.js
new file mode 100644
index 000000000..1aa9e6eaa
--- /dev/null
+++ b/src/plugins/gridRowEnd.js
@@ -0,0 +1,5 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function() {
+  return createUtilityPlugin('gridRowEnd', [['row-end', ['gridRowEnd']]])
+}
diff --git a/src/plugins/gridRowGap.js b/src/plugins/gridRowGap.js
new file mode 100644
index 000000000..eb642f79f
--- /dev/null
+++ b/src/plugins/gridRowGap.js
@@ -0,0 +1,5 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function() {
+  return createUtilityPlugin('gridRowGap', [['row-gap', ['gridRowGap']]])
+}
diff --git a/src/plugins/gridRowStart.js b/src/plugins/gridRowStart.js
new file mode 100644
index 000000000..2f4fe1d03
--- /dev/null
+++ b/src/plugins/gridRowStart.js
@@ -0,0 +1,5 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function() {
+  return createUtilityPlugin('gridRowStart', [['row-start', ['gridRowStart']]])
+}
diff --git a/src/plugins/gridTemplateColumns.js b/src/plugins/gridTemplateColumns.js
new file mode 100644
index 000000000..56e9f5b00
--- /dev/null
+++ b/src/plugins/gridTemplateColumns.js
@@ -0,0 +1,5 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function() {
+  return createUtilityPlugin('gridTemplateColumns', [['grid-cols', ['gridTemplateColumns']]])
+}
diff --git a/src/plugins/gridTemplateRows.js b/src/plugins/gridTemplateRows.js
new file mode 100644
index 000000000..90d8c962c
--- /dev/null
+++ b/src/plugins/gridTemplateRows.js
@@ -0,0 +1,5 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function() {
+  return createUtilityPlugin('gridTemplateRows', [['grid-rows', ['gridTemplateRows']]])
+}
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index 5db3f8c8e..22082a4d3 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -405,6 +405,70 @@ module.exports = {
       '40': '40',
       '50': '50',
     },
+    gridTemplateColumns: {
+      '1': 'repeat(1, 1fr)',
+      '2': 'repeat(2, 1fr)',
+      '3': 'repeat(3, 1fr)',
+      '4': 'repeat(4, 1fr)',
+      '5': 'repeat(5, 1fr)',
+      '6': 'repeat(6, 1fr)',
+      '7': 'repeat(7, 1fr)',
+      '8': 'repeat(8, 1fr)',
+      '9': 'repeat(9, 1fr)',
+      '10': 'repeat(10, 1fr)',
+      '11': 'repeat(11, 1fr)',
+      '12': 'repeat(12, 1fr)',
+    },
+    gridColumn: {
+      'span-1': 'span 1 / span 1',
+      'span-2': 'span 2 / span 2',
+      'span-3': 'span 3 / span 3',
+      'span-4': 'span 4 / span 4',
+      'span-5': 'span 5 / span 5',
+      'span-6': 'span 6 / span 6',
+      'span-7': 'span 7 / span 7',
+      'span-8': 'span 8 / span 8',
+      'span-9': 'span 9 / span 9',
+      'span-10': 'span 10 / span 10',
+      'span-11': 'span 11 / span 11',
+      'span-12': 'span 12 / span 12',
+    },
+    gridColumnStart: {
+      '1': '1',
+      '2': '2',
+      '3': '3',
+      '4': '4',
+      '5': '5',
+      '6': '6',
+      '7': '7',
+      '8': '8',
+      '9': '9',
+      '10': '10',
+      '11': '11',
+      '12': '12',
+      '13': '13',
+    },
+    gridColumnEnd: {
+      '1': '1',
+      '2': '2',
+      '3': '3',
+      '4': '4',
+      '5': '5',
+      '6': '6',
+      '7': '7',
+      '8': '8',
+      '9': '9',
+      '10': '10',
+      '11': '11',
+      '12': '12',
+      '13': '13',
+    },
+    gridColumnGap: theme => theme('spacing'),
+    gridTemplateRows: {},
+    gridRow: {},
+    gridRowStart: {},
+    gridRowEnd: {},
+    gridRowGap: theme => theme('spacing'),
     transformOrigin: {
       center: 'center',
       top: 'top',
@@ -513,6 +577,16 @@ module.exports = {
     width: ['responsive'],
     wordBreak: ['responsive'],
     zIndex: ['responsive'],
+    gridTemplateColumns: ['responsive'],
+    gridColumnGap: ['responsive'],
+    gridColumn: ['responsive'],
+    gridColumnStart: ['responsive'],
+    gridColumnEnd: ['responsive'],
+    gridTemplateRows: ['responsive'],
+    gridRowGap: ['responsive'],
+    gridRow: ['responsive'],
+    gridRowStart: ['responsive'],
+    gridRowEnd: ['responsive'],
     transform: ['responsive'],
     transformOrigin: ['responsive'],
     scale: ['responsive', 'hover', 'focus'],

From 3e2c626409e9c7dc709af220e9422475dc688bb2 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Tue, 24 Dec 2019 13:21:09 -0500
Subject: [PATCH 03/15] Re-order grid theme values

---
 stubs/defaultConfig.stub.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index 22082a4d3..f496f5f5b 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -419,6 +419,7 @@ module.exports = {
       '11': 'repeat(11, 1fr)',
       '12': 'repeat(12, 1fr)',
     },
+    gridColumnGap: theme => theme('spacing'),
     gridColumn: {
       'span-1': 'span 1 / span 1',
       'span-2': 'span 2 / span 2',
@@ -463,12 +464,11 @@ module.exports = {
       '12': '12',
       '13': '13',
     },
-    gridColumnGap: theme => theme('spacing'),
     gridTemplateRows: {},
+    gridRowGap: theme => theme('spacing'),
     gridRow: {},
     gridRowStart: {},
     gridRowEnd: {},
-    gridRowGap: theme => theme('spacing'),
     transformOrigin: {
       center: 'center',
       top: 'top',

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 04/15] 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'],

From d075773c67f5922d824a21e23d89455319365bd0 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Wed, 25 Dec 2019 13:04:34 -0500
Subject: [PATCH 05/15] Use minmax to ensure default grid columns are always
 equal width

---
 .../fixtures/tailwind-output-important.css    | 120 +++++++++---------
 __tests__/fixtures/tailwind-output.css        | 120 +++++++++---------
 stubs/defaultConfig.stub.js                   |  24 ++--
 3 files changed, 132 insertions(+), 132 deletions(-)

diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index a42e78304..ae5be02b7 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -8443,51 +8443,51 @@ video {
 }
 
 .grid-cols-1 {
-  grid-template-columns: repeat(1, 1fr) !important;
+  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
 }
 
 .grid-cols-2 {
-  grid-template-columns: repeat(2, 1fr) !important;
+  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 }
 
 .grid-cols-3 {
-  grid-template-columns: repeat(3, 1fr) !important;
+  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
 }
 
 .grid-cols-4 {
-  grid-template-columns: repeat(4, 1fr) !important;
+  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
 }
 
 .grid-cols-5 {
-  grid-template-columns: repeat(5, 1fr) !important;
+  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
 }
 
 .grid-cols-6 {
-  grid-template-columns: repeat(6, 1fr) !important;
+  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
 }
 
 .grid-cols-7 {
-  grid-template-columns: repeat(7, 1fr) !important;
+  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
 }
 
 .grid-cols-8 {
-  grid-template-columns: repeat(8, 1fr) !important;
+  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
 }
 
 .grid-cols-9 {
-  grid-template-columns: repeat(9, 1fr) !important;
+  grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
 }
 
 .grid-cols-10 {
-  grid-template-columns: repeat(10, 1fr) !important;
+  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
 }
 
 .grid-cols-11 {
-  grid-template-columns: repeat(11, 1fr) !important;
+  grid-template-columns: repeat(11, minmax(0, 1fr)) !important;
 }
 
 .grid-cols-12 {
-  grid-template-columns: repeat(12, 1fr) !important;
+  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
 }
 
 .col-span-1 {
@@ -17993,51 +17993,51 @@ video {
   }
 
   .sm\:grid-cols-1 {
-    grid-template-columns: repeat(1, 1fr) !important;
+    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
   }
 
   .sm\:grid-cols-2 {
-    grid-template-columns: repeat(2, 1fr) !important;
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
   }
 
   .sm\:grid-cols-3 {
-    grid-template-columns: repeat(3, 1fr) !important;
+    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
   }
 
   .sm\:grid-cols-4 {
-    grid-template-columns: repeat(4, 1fr) !important;
+    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
   }
 
   .sm\:grid-cols-5 {
-    grid-template-columns: repeat(5, 1fr) !important;
+    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
   }
 
   .sm\:grid-cols-6 {
-    grid-template-columns: repeat(6, 1fr) !important;
+    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
   }
 
   .sm\:grid-cols-7 {
-    grid-template-columns: repeat(7, 1fr) !important;
+    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
   }
 
   .sm\:grid-cols-8 {
-    grid-template-columns: repeat(8, 1fr) !important;
+    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
   }
 
   .sm\:grid-cols-9 {
-    grid-template-columns: repeat(9, 1fr) !important;
+    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
   }
 
   .sm\:grid-cols-10 {
-    grid-template-columns: repeat(10, 1fr) !important;
+    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
   }
 
   .sm\:grid-cols-11 {
-    grid-template-columns: repeat(11, 1fr) !important;
+    grid-template-columns: repeat(11, minmax(0, 1fr)) !important;
   }
 
   .sm\:grid-cols-12 {
-    grid-template-columns: repeat(12, 1fr) !important;
+    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
   }
 
   .sm\:col-span-1 {
@@ -27544,51 +27544,51 @@ video {
   }
 
   .md\:grid-cols-1 {
-    grid-template-columns: repeat(1, 1fr) !important;
+    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
   }
 
   .md\:grid-cols-2 {
-    grid-template-columns: repeat(2, 1fr) !important;
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
   }
 
   .md\:grid-cols-3 {
-    grid-template-columns: repeat(3, 1fr) !important;
+    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
   }
 
   .md\:grid-cols-4 {
-    grid-template-columns: repeat(4, 1fr) !important;
+    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
   }
 
   .md\:grid-cols-5 {
-    grid-template-columns: repeat(5, 1fr) !important;
+    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
   }
 
   .md\:grid-cols-6 {
-    grid-template-columns: repeat(6, 1fr) !important;
+    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
   }
 
   .md\:grid-cols-7 {
-    grid-template-columns: repeat(7, 1fr) !important;
+    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
   }
 
   .md\:grid-cols-8 {
-    grid-template-columns: repeat(8, 1fr) !important;
+    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
   }
 
   .md\:grid-cols-9 {
-    grid-template-columns: repeat(9, 1fr) !important;
+    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
   }
 
   .md\:grid-cols-10 {
-    grid-template-columns: repeat(10, 1fr) !important;
+    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
   }
 
   .md\:grid-cols-11 {
-    grid-template-columns: repeat(11, 1fr) !important;
+    grid-template-columns: repeat(11, minmax(0, 1fr)) !important;
   }
 
   .md\:grid-cols-12 {
-    grid-template-columns: repeat(12, 1fr) !important;
+    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
   }
 
   .md\:col-span-1 {
@@ -37095,51 +37095,51 @@ video {
   }
 
   .lg\:grid-cols-1 {
-    grid-template-columns: repeat(1, 1fr) !important;
+    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
   }
 
   .lg\:grid-cols-2 {
-    grid-template-columns: repeat(2, 1fr) !important;
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
   }
 
   .lg\:grid-cols-3 {
-    grid-template-columns: repeat(3, 1fr) !important;
+    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
   }
 
   .lg\:grid-cols-4 {
-    grid-template-columns: repeat(4, 1fr) !important;
+    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
   }
 
   .lg\:grid-cols-5 {
-    grid-template-columns: repeat(5, 1fr) !important;
+    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
   }
 
   .lg\:grid-cols-6 {
-    grid-template-columns: repeat(6, 1fr) !important;
+    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
   }
 
   .lg\:grid-cols-7 {
-    grid-template-columns: repeat(7, 1fr) !important;
+    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
   }
 
   .lg\:grid-cols-8 {
-    grid-template-columns: repeat(8, 1fr) !important;
+    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
   }
 
   .lg\:grid-cols-9 {
-    grid-template-columns: repeat(9, 1fr) !important;
+    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
   }
 
   .lg\:grid-cols-10 {
-    grid-template-columns: repeat(10, 1fr) !important;
+    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
   }
 
   .lg\:grid-cols-11 {
-    grid-template-columns: repeat(11, 1fr) !important;
+    grid-template-columns: repeat(11, minmax(0, 1fr)) !important;
   }
 
   .lg\:grid-cols-12 {
-    grid-template-columns: repeat(12, 1fr) !important;
+    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
   }
 
   .lg\:col-span-1 {
@@ -46646,51 +46646,51 @@ video {
   }
 
   .xl\:grid-cols-1 {
-    grid-template-columns: repeat(1, 1fr) !important;
+    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
   }
 
   .xl\:grid-cols-2 {
-    grid-template-columns: repeat(2, 1fr) !important;
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
   }
 
   .xl\:grid-cols-3 {
-    grid-template-columns: repeat(3, 1fr) !important;
+    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
   }
 
   .xl\:grid-cols-4 {
-    grid-template-columns: repeat(4, 1fr) !important;
+    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
   }
 
   .xl\:grid-cols-5 {
-    grid-template-columns: repeat(5, 1fr) !important;
+    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
   }
 
   .xl\:grid-cols-6 {
-    grid-template-columns: repeat(6, 1fr) !important;
+    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
   }
 
   .xl\:grid-cols-7 {
-    grid-template-columns: repeat(7, 1fr) !important;
+    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
   }
 
   .xl\:grid-cols-8 {
-    grid-template-columns: repeat(8, 1fr) !important;
+    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
   }
 
   .xl\:grid-cols-9 {
-    grid-template-columns: repeat(9, 1fr) !important;
+    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
   }
 
   .xl\:grid-cols-10 {
-    grid-template-columns: repeat(10, 1fr) !important;
+    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
   }
 
   .xl\:grid-cols-11 {
-    grid-template-columns: repeat(11, 1fr) !important;
+    grid-template-columns: repeat(11, minmax(0, 1fr)) !important;
   }
 
   .xl\:grid-cols-12 {
-    grid-template-columns: repeat(12, 1fr) !important;
+    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
   }
 
   .xl\:col-span-1 {
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 036396d61..6db193f71 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -8443,51 +8443,51 @@ video {
 }
 
 .grid-cols-1 {
-  grid-template-columns: repeat(1, 1fr);
+  grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
 .grid-cols-2 {
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
 .grid-cols-3 {
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
 .grid-cols-4 {
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
 .grid-cols-5 {
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(5, minmax(0, 1fr));
 }
 
 .grid-cols-6 {
-  grid-template-columns: repeat(6, 1fr);
+  grid-template-columns: repeat(6, minmax(0, 1fr));
 }
 
 .grid-cols-7 {
-  grid-template-columns: repeat(7, 1fr);
+  grid-template-columns: repeat(7, minmax(0, 1fr));
 }
 
 .grid-cols-8 {
-  grid-template-columns: repeat(8, 1fr);
+  grid-template-columns: repeat(8, minmax(0, 1fr));
 }
 
 .grid-cols-9 {
-  grid-template-columns: repeat(9, 1fr);
+  grid-template-columns: repeat(9, minmax(0, 1fr));
 }
 
 .grid-cols-10 {
-  grid-template-columns: repeat(10, 1fr);
+  grid-template-columns: repeat(10, minmax(0, 1fr));
 }
 
 .grid-cols-11 {
-  grid-template-columns: repeat(11, 1fr);
+  grid-template-columns: repeat(11, minmax(0, 1fr));
 }
 
 .grid-cols-12 {
-  grid-template-columns: repeat(12, 1fr);
+  grid-template-columns: repeat(12, minmax(0, 1fr));
 }
 
 .col-span-1 {
@@ -17993,51 +17993,51 @@ video {
   }
 
   .sm\:grid-cols-1 {
-    grid-template-columns: repeat(1, 1fr);
+    grid-template-columns: repeat(1, minmax(0, 1fr));
   }
 
   .sm\:grid-cols-2 {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
   .sm\:grid-cols-3 {
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
   .sm\:grid-cols-4 {
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
   .sm\:grid-cols-5 {
-    grid-template-columns: repeat(5, 1fr);
+    grid-template-columns: repeat(5, minmax(0, 1fr));
   }
 
   .sm\:grid-cols-6 {
-    grid-template-columns: repeat(6, 1fr);
+    grid-template-columns: repeat(6, minmax(0, 1fr));
   }
 
   .sm\:grid-cols-7 {
-    grid-template-columns: repeat(7, 1fr);
+    grid-template-columns: repeat(7, minmax(0, 1fr));
   }
 
   .sm\:grid-cols-8 {
-    grid-template-columns: repeat(8, 1fr);
+    grid-template-columns: repeat(8, minmax(0, 1fr));
   }
 
   .sm\:grid-cols-9 {
-    grid-template-columns: repeat(9, 1fr);
+    grid-template-columns: repeat(9, minmax(0, 1fr));
   }
 
   .sm\:grid-cols-10 {
-    grid-template-columns: repeat(10, 1fr);
+    grid-template-columns: repeat(10, minmax(0, 1fr));
   }
 
   .sm\:grid-cols-11 {
-    grid-template-columns: repeat(11, 1fr);
+    grid-template-columns: repeat(11, minmax(0, 1fr));
   }
 
   .sm\:grid-cols-12 {
-    grid-template-columns: repeat(12, 1fr);
+    grid-template-columns: repeat(12, minmax(0, 1fr));
   }
 
   .sm\:col-span-1 {
@@ -27544,51 +27544,51 @@ video {
   }
 
   .md\:grid-cols-1 {
-    grid-template-columns: repeat(1, 1fr);
+    grid-template-columns: repeat(1, minmax(0, 1fr));
   }
 
   .md\:grid-cols-2 {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
   .md\:grid-cols-3 {
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
   .md\:grid-cols-4 {
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
   .md\:grid-cols-5 {
-    grid-template-columns: repeat(5, 1fr);
+    grid-template-columns: repeat(5, minmax(0, 1fr));
   }
 
   .md\:grid-cols-6 {
-    grid-template-columns: repeat(6, 1fr);
+    grid-template-columns: repeat(6, minmax(0, 1fr));
   }
 
   .md\:grid-cols-7 {
-    grid-template-columns: repeat(7, 1fr);
+    grid-template-columns: repeat(7, minmax(0, 1fr));
   }
 
   .md\:grid-cols-8 {
-    grid-template-columns: repeat(8, 1fr);
+    grid-template-columns: repeat(8, minmax(0, 1fr));
   }
 
   .md\:grid-cols-9 {
-    grid-template-columns: repeat(9, 1fr);
+    grid-template-columns: repeat(9, minmax(0, 1fr));
   }
 
   .md\:grid-cols-10 {
-    grid-template-columns: repeat(10, 1fr);
+    grid-template-columns: repeat(10, minmax(0, 1fr));
   }
 
   .md\:grid-cols-11 {
-    grid-template-columns: repeat(11, 1fr);
+    grid-template-columns: repeat(11, minmax(0, 1fr));
   }
 
   .md\:grid-cols-12 {
-    grid-template-columns: repeat(12, 1fr);
+    grid-template-columns: repeat(12, minmax(0, 1fr));
   }
 
   .md\:col-span-1 {
@@ -37095,51 +37095,51 @@ video {
   }
 
   .lg\:grid-cols-1 {
-    grid-template-columns: repeat(1, 1fr);
+    grid-template-columns: repeat(1, minmax(0, 1fr));
   }
 
   .lg\:grid-cols-2 {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
   .lg\:grid-cols-3 {
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
   .lg\:grid-cols-4 {
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
   .lg\:grid-cols-5 {
-    grid-template-columns: repeat(5, 1fr);
+    grid-template-columns: repeat(5, minmax(0, 1fr));
   }
 
   .lg\:grid-cols-6 {
-    grid-template-columns: repeat(6, 1fr);
+    grid-template-columns: repeat(6, minmax(0, 1fr));
   }
 
   .lg\:grid-cols-7 {
-    grid-template-columns: repeat(7, 1fr);
+    grid-template-columns: repeat(7, minmax(0, 1fr));
   }
 
   .lg\:grid-cols-8 {
-    grid-template-columns: repeat(8, 1fr);
+    grid-template-columns: repeat(8, minmax(0, 1fr));
   }
 
   .lg\:grid-cols-9 {
-    grid-template-columns: repeat(9, 1fr);
+    grid-template-columns: repeat(9, minmax(0, 1fr));
   }
 
   .lg\:grid-cols-10 {
-    grid-template-columns: repeat(10, 1fr);
+    grid-template-columns: repeat(10, minmax(0, 1fr));
   }
 
   .lg\:grid-cols-11 {
-    grid-template-columns: repeat(11, 1fr);
+    grid-template-columns: repeat(11, minmax(0, 1fr));
   }
 
   .lg\:grid-cols-12 {
-    grid-template-columns: repeat(12, 1fr);
+    grid-template-columns: repeat(12, minmax(0, 1fr));
   }
 
   .lg\:col-span-1 {
@@ -46646,51 +46646,51 @@ video {
   }
 
   .xl\:grid-cols-1 {
-    grid-template-columns: repeat(1, 1fr);
+    grid-template-columns: repeat(1, minmax(0, 1fr));
   }
 
   .xl\:grid-cols-2 {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
   .xl\:grid-cols-3 {
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
   .xl\:grid-cols-4 {
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
   .xl\:grid-cols-5 {
-    grid-template-columns: repeat(5, 1fr);
+    grid-template-columns: repeat(5, minmax(0, 1fr));
   }
 
   .xl\:grid-cols-6 {
-    grid-template-columns: repeat(6, 1fr);
+    grid-template-columns: repeat(6, minmax(0, 1fr));
   }
 
   .xl\:grid-cols-7 {
-    grid-template-columns: repeat(7, 1fr);
+    grid-template-columns: repeat(7, minmax(0, 1fr));
   }
 
   .xl\:grid-cols-8 {
-    grid-template-columns: repeat(8, 1fr);
+    grid-template-columns: repeat(8, minmax(0, 1fr));
   }
 
   .xl\:grid-cols-9 {
-    grid-template-columns: repeat(9, 1fr);
+    grid-template-columns: repeat(9, minmax(0, 1fr));
   }
 
   .xl\:grid-cols-10 {
-    grid-template-columns: repeat(10, 1fr);
+    grid-template-columns: repeat(10, minmax(0, 1fr));
   }
 
   .xl\:grid-cols-11 {
-    grid-template-columns: repeat(11, 1fr);
+    grid-template-columns: repeat(11, minmax(0, 1fr));
   }
 
   .xl\:grid-cols-12 {
-    grid-template-columns: repeat(12, 1fr);
+    grid-template-columns: repeat(12, minmax(0, 1fr));
   }
 
   .xl\:col-span-1 {
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index 27a91f988..eb343494f 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -407,18 +407,18 @@ module.exports = {
     },
     gridGap: theme => theme('spacing'),
     gridTemplateColumns: {
-      '1': 'repeat(1, 1fr)',
-      '2': 'repeat(2, 1fr)',
-      '3': 'repeat(3, 1fr)',
-      '4': 'repeat(4, 1fr)',
-      '5': 'repeat(5, 1fr)',
-      '6': 'repeat(6, 1fr)',
-      '7': 'repeat(7, 1fr)',
-      '8': 'repeat(8, 1fr)',
-      '9': 'repeat(9, 1fr)',
-      '10': 'repeat(10, 1fr)',
-      '11': 'repeat(11, 1fr)',
-      '12': 'repeat(12, 1fr)',
+      '1': 'repeat(1, minmax(0, 1fr))',
+      '2': 'repeat(2, minmax(0, 1fr))',
+      '3': 'repeat(3, minmax(0, 1fr))',
+      '4': 'repeat(4, minmax(0, 1fr))',
+      '5': 'repeat(5, minmax(0, 1fr))',
+      '6': 'repeat(6, minmax(0, 1fr))',
+      '7': 'repeat(7, minmax(0, 1fr))',
+      '8': 'repeat(8, minmax(0, 1fr))',
+      '9': 'repeat(9, minmax(0, 1fr))',
+      '10': 'repeat(10, minmax(0, 1fr))',
+      '11': 'repeat(11, minmax(0, 1fr))',
+      '12': 'repeat(12, minmax(0, 1fr))',
     },
     gridColumnGap: {},
     gridColumn: {

From d33fbc489560ce7f9ed8c0b8b205d2e4b882af73 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Wed, 25 Dec 2019 13:16:04 -0500
Subject: [PATCH 06/15] Rename gap plugins to remove grid prefix, manually
 include old property names

---
 src/plugins/{gridRowGap.js => columnGap.js} |  2 +-
 src/plugins/{gridGap.js => gap.js}          |  2 +-
 src/plugins/{gridColumnGap.js => rowGap.js} |  2 +-
 stubs/defaultConfig.stub.js                 | 12 ++++++------
 4 files changed, 9 insertions(+), 9 deletions(-)
 rename src/plugins/{gridRowGap.js => columnGap.js} (51%)
 rename src/plugins/{gridGap.js => gap.js} (58%)
 rename src/plugins/{gridColumnGap.js => rowGap.js} (53%)

diff --git a/src/plugins/gridRowGap.js b/src/plugins/columnGap.js
similarity index 51%
rename from src/plugins/gridRowGap.js
rename to src/plugins/columnGap.js
index eb642f79f..6fff2b6d4 100644
--- a/src/plugins/gridRowGap.js
+++ b/src/plugins/columnGap.js
@@ -1,5 +1,5 @@
 import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function() {
-  return createUtilityPlugin('gridRowGap', [['row-gap', ['gridRowGap']]])
+  return createUtilityPlugin('columnGap', [['col-gap', ['gridColumnGap', 'columnGap']]])
 }
diff --git a/src/plugins/gridGap.js b/src/plugins/gap.js
similarity index 58%
rename from src/plugins/gridGap.js
rename to src/plugins/gap.js
index ec8d0e535..c2c2090a4 100644
--- a/src/plugins/gridGap.js
+++ b/src/plugins/gap.js
@@ -1,5 +1,5 @@
 import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function() {
-  return createUtilityPlugin('gridGap', [['gap', ['gridGap']]])
+  return createUtilityPlugin('gap', [['gap', ['gridGap', 'gap']]])
 }
diff --git a/src/plugins/gridColumnGap.js b/src/plugins/rowGap.js
similarity index 53%
rename from src/plugins/gridColumnGap.js
rename to src/plugins/rowGap.js
index 0a309687a..4d63ff044 100644
--- a/src/plugins/gridColumnGap.js
+++ b/src/plugins/rowGap.js
@@ -1,5 +1,5 @@
 import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function() {
-  return createUtilityPlugin('gridColumnGap', [['col-gap', ['gridColumnGap']]])
+  return createUtilityPlugin('rowGap', [['row-gap', ['gridRowGap', 'rowGap']]])
 }
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index eb343494f..24fe9b23f 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -405,7 +405,9 @@ module.exports = {
       '40': '40',
       '50': '50',
     },
-    gridGap: theme => theme('spacing'),
+    gap: theme => theme('spacing'),
+    rowGap: {},
+    columnGap: {},
     gridTemplateColumns: {
       '1': 'repeat(1, minmax(0, 1fr))',
       '2': 'repeat(2, minmax(0, 1fr))',
@@ -420,7 +422,6 @@ module.exports = {
       '11': 'repeat(11, minmax(0, 1fr))',
       '12': 'repeat(12, minmax(0, 1fr))',
     },
-    gridColumnGap: {},
     gridColumn: {
       'span-1': 'span 1 / span 1',
       'span-2': 'span 2 / span 2',
@@ -466,7 +467,6 @@ module.exports = {
       '13': '13',
     },
     gridTemplateRows: {},
-    gridRowGap: {},
     gridRow: {},
     gridRowStart: {},
     gridRowEnd: {},
@@ -578,14 +578,14 @@ module.exports = {
     width: ['responsive'],
     wordBreak: ['responsive'],
     zIndex: ['responsive'],
-    gridGap: ['responsive'],
+    gap: ['responsive'],
+    columnGap: ['responsive'],
+    rowGap: ['responsive'],
     gridTemplateColumns: ['responsive'],
-    gridColumnGap: ['responsive'],
     gridColumn: ['responsive'],
     gridColumnStart: ['responsive'],
     gridColumnEnd: ['responsive'],
     gridTemplateRows: ['responsive'],
-    gridRowGap: ['responsive'],
     gridRow: ['responsive'],
     gridRowStart: ['responsive'],
     gridRowEnd: ['responsive'],

From 54684f74122490dcb4ad213c412288dd8049fbcf Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Wed, 25 Dec 2019 13:20:53 -0500
Subject: [PATCH 07/15] Update core plugins list, rebuild test fixtures

---
 src/corePlugins.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index d7ca84e5c..6e7c85d5d 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -71,14 +71,14 @@ 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 gap from './plugins/gap'
+import columnGap from './plugins/columnGap'
+import rowGap from './plugins/rowGap'
 import gridTemplateColumns from './plugins/gridTemplateColumns'
-import gridColumnGap from './plugins/gridColumnGap'
 import gridColumn from './plugins/gridColumn'
 import gridColumnStart from './plugins/gridColumnStart'
 import gridColumnEnd from './plugins/gridColumnEnd'
 import gridTemplateRows from './plugins/gridTemplateRows'
-import gridRowGap from './plugins/gridRowGap'
 import gridRow from './plugins/gridRow'
 import gridRowStart from './plugins/gridRowStart'
 import gridRowEnd from './plugins/gridRowEnd'
@@ -155,14 +155,14 @@ export default function({ corePlugins: corePluginConfig }) {
     wordBreak,
     width,
     zIndex,
-    gridGap,
+    gap,
+    columnGap,
+    rowGap,
     gridTemplateColumns,
-    gridColumnGap,
     gridColumn,
     gridColumnStart,
     gridColumnEnd,
     gridTemplateRows,
-    gridRowGap,
     gridRow,
     gridRowStart,
     gridRowEnd,

From 505d03811ce784b7f47175cec7f7499df86cfe32 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Wed, 25 Dec 2019 13:27:18 -0500
Subject: [PATCH 08/15] Update test fixtures for real

---
 .../fixtures/tailwind-output-important.css    | 95 +++++++++++++++++++
 __tests__/fixtures/tailwind-output.css        | 95 +++++++++++++++++++
 2 files changed, 190 insertions(+)

diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index ae5be02b7..17ccb6ce3 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -8368,78 +8368,97 @@ video {
 
 .gap-0 {
   grid-gap: 0 !important;
+  gap: 0 !important;
 }
 
 .gap-1 {
   grid-gap: 0.25rem !important;
+  gap: 0.25rem !important;
 }
 
 .gap-2 {
   grid-gap: 0.5rem !important;
+  gap: 0.5rem !important;
 }
 
 .gap-3 {
   grid-gap: 0.75rem !important;
+  gap: 0.75rem !important;
 }
 
 .gap-4 {
   grid-gap: 1rem !important;
+  gap: 1rem !important;
 }
 
 .gap-5 {
   grid-gap: 1.25rem !important;
+  gap: 1.25rem !important;
 }
 
 .gap-6 {
   grid-gap: 1.5rem !important;
+  gap: 1.5rem !important;
 }
 
 .gap-8 {
   grid-gap: 2rem !important;
+  gap: 2rem !important;
 }
 
 .gap-10 {
   grid-gap: 2.5rem !important;
+  gap: 2.5rem !important;
 }
 
 .gap-12 {
   grid-gap: 3rem !important;
+  gap: 3rem !important;
 }
 
 .gap-16 {
   grid-gap: 4rem !important;
+  gap: 4rem !important;
 }
 
 .gap-20 {
   grid-gap: 5rem !important;
+  gap: 5rem !important;
 }
 
 .gap-24 {
   grid-gap: 6rem !important;
+  gap: 6rem !important;
 }
 
 .gap-32 {
   grid-gap: 8rem !important;
+  gap: 8rem !important;
 }
 
 .gap-40 {
   grid-gap: 10rem !important;
+  gap: 10rem !important;
 }
 
 .gap-48 {
   grid-gap: 12rem !important;
+  gap: 12rem !important;
 }
 
 .gap-56 {
   grid-gap: 14rem !important;
+  gap: 14rem !important;
 }
 
 .gap-64 {
   grid-gap: 16rem !important;
+  gap: 16rem !important;
 }
 
 .gap-px {
   grid-gap: 1px !important;
+  gap: 1px !important;
 }
 
 .grid-cols-1 {
@@ -17918,78 +17937,97 @@ video {
 
   .sm\:gap-0 {
     grid-gap: 0 !important;
+    gap: 0 !important;
   }
 
   .sm\:gap-1 {
     grid-gap: 0.25rem !important;
+    gap: 0.25rem !important;
   }
 
   .sm\:gap-2 {
     grid-gap: 0.5rem !important;
+    gap: 0.5rem !important;
   }
 
   .sm\:gap-3 {
     grid-gap: 0.75rem !important;
+    gap: 0.75rem !important;
   }
 
   .sm\:gap-4 {
     grid-gap: 1rem !important;
+    gap: 1rem !important;
   }
 
   .sm\:gap-5 {
     grid-gap: 1.25rem !important;
+    gap: 1.25rem !important;
   }
 
   .sm\:gap-6 {
     grid-gap: 1.5rem !important;
+    gap: 1.5rem !important;
   }
 
   .sm\:gap-8 {
     grid-gap: 2rem !important;
+    gap: 2rem !important;
   }
 
   .sm\:gap-10 {
     grid-gap: 2.5rem !important;
+    gap: 2.5rem !important;
   }
 
   .sm\:gap-12 {
     grid-gap: 3rem !important;
+    gap: 3rem !important;
   }
 
   .sm\:gap-16 {
     grid-gap: 4rem !important;
+    gap: 4rem !important;
   }
 
   .sm\:gap-20 {
     grid-gap: 5rem !important;
+    gap: 5rem !important;
   }
 
   .sm\:gap-24 {
     grid-gap: 6rem !important;
+    gap: 6rem !important;
   }
 
   .sm\:gap-32 {
     grid-gap: 8rem !important;
+    gap: 8rem !important;
   }
 
   .sm\:gap-40 {
     grid-gap: 10rem !important;
+    gap: 10rem !important;
   }
 
   .sm\:gap-48 {
     grid-gap: 12rem !important;
+    gap: 12rem !important;
   }
 
   .sm\:gap-56 {
     grid-gap: 14rem !important;
+    gap: 14rem !important;
   }
 
   .sm\:gap-64 {
     grid-gap: 16rem !important;
+    gap: 16rem !important;
   }
 
   .sm\:gap-px {
     grid-gap: 1px !important;
+    gap: 1px !important;
   }
 
   .sm\:grid-cols-1 {
@@ -27469,78 +27507,97 @@ video {
 
   .md\:gap-0 {
     grid-gap: 0 !important;
+    gap: 0 !important;
   }
 
   .md\:gap-1 {
     grid-gap: 0.25rem !important;
+    gap: 0.25rem !important;
   }
 
   .md\:gap-2 {
     grid-gap: 0.5rem !important;
+    gap: 0.5rem !important;
   }
 
   .md\:gap-3 {
     grid-gap: 0.75rem !important;
+    gap: 0.75rem !important;
   }
 
   .md\:gap-4 {
     grid-gap: 1rem !important;
+    gap: 1rem !important;
   }
 
   .md\:gap-5 {
     grid-gap: 1.25rem !important;
+    gap: 1.25rem !important;
   }
 
   .md\:gap-6 {
     grid-gap: 1.5rem !important;
+    gap: 1.5rem !important;
   }
 
   .md\:gap-8 {
     grid-gap: 2rem !important;
+    gap: 2rem !important;
   }
 
   .md\:gap-10 {
     grid-gap: 2.5rem !important;
+    gap: 2.5rem !important;
   }
 
   .md\:gap-12 {
     grid-gap: 3rem !important;
+    gap: 3rem !important;
   }
 
   .md\:gap-16 {
     grid-gap: 4rem !important;
+    gap: 4rem !important;
   }
 
   .md\:gap-20 {
     grid-gap: 5rem !important;
+    gap: 5rem !important;
   }
 
   .md\:gap-24 {
     grid-gap: 6rem !important;
+    gap: 6rem !important;
   }
 
   .md\:gap-32 {
     grid-gap: 8rem !important;
+    gap: 8rem !important;
   }
 
   .md\:gap-40 {
     grid-gap: 10rem !important;
+    gap: 10rem !important;
   }
 
   .md\:gap-48 {
     grid-gap: 12rem !important;
+    gap: 12rem !important;
   }
 
   .md\:gap-56 {
     grid-gap: 14rem !important;
+    gap: 14rem !important;
   }
 
   .md\:gap-64 {
     grid-gap: 16rem !important;
+    gap: 16rem !important;
   }
 
   .md\:gap-px {
     grid-gap: 1px !important;
+    gap: 1px !important;
   }
 
   .md\:grid-cols-1 {
@@ -37020,78 +37077,97 @@ video {
 
   .lg\:gap-0 {
     grid-gap: 0 !important;
+    gap: 0 !important;
   }
 
   .lg\:gap-1 {
     grid-gap: 0.25rem !important;
+    gap: 0.25rem !important;
   }
 
   .lg\:gap-2 {
     grid-gap: 0.5rem !important;
+    gap: 0.5rem !important;
   }
 
   .lg\:gap-3 {
     grid-gap: 0.75rem !important;
+    gap: 0.75rem !important;
   }
 
   .lg\:gap-4 {
     grid-gap: 1rem !important;
+    gap: 1rem !important;
   }
 
   .lg\:gap-5 {
     grid-gap: 1.25rem !important;
+    gap: 1.25rem !important;
   }
 
   .lg\:gap-6 {
     grid-gap: 1.5rem !important;
+    gap: 1.5rem !important;
   }
 
   .lg\:gap-8 {
     grid-gap: 2rem !important;
+    gap: 2rem !important;
   }
 
   .lg\:gap-10 {
     grid-gap: 2.5rem !important;
+    gap: 2.5rem !important;
   }
 
   .lg\:gap-12 {
     grid-gap: 3rem !important;
+    gap: 3rem !important;
   }
 
   .lg\:gap-16 {
     grid-gap: 4rem !important;
+    gap: 4rem !important;
   }
 
   .lg\:gap-20 {
     grid-gap: 5rem !important;
+    gap: 5rem !important;
   }
 
   .lg\:gap-24 {
     grid-gap: 6rem !important;
+    gap: 6rem !important;
   }
 
   .lg\:gap-32 {
     grid-gap: 8rem !important;
+    gap: 8rem !important;
   }
 
   .lg\:gap-40 {
     grid-gap: 10rem !important;
+    gap: 10rem !important;
   }
 
   .lg\:gap-48 {
     grid-gap: 12rem !important;
+    gap: 12rem !important;
   }
 
   .lg\:gap-56 {
     grid-gap: 14rem !important;
+    gap: 14rem !important;
   }
 
   .lg\:gap-64 {
     grid-gap: 16rem !important;
+    gap: 16rem !important;
   }
 
   .lg\:gap-px {
     grid-gap: 1px !important;
+    gap: 1px !important;
   }
 
   .lg\:grid-cols-1 {
@@ -46571,78 +46647,97 @@ video {
 
   .xl\:gap-0 {
     grid-gap: 0 !important;
+    gap: 0 !important;
   }
 
   .xl\:gap-1 {
     grid-gap: 0.25rem !important;
+    gap: 0.25rem !important;
   }
 
   .xl\:gap-2 {
     grid-gap: 0.5rem !important;
+    gap: 0.5rem !important;
   }
 
   .xl\:gap-3 {
     grid-gap: 0.75rem !important;
+    gap: 0.75rem !important;
   }
 
   .xl\:gap-4 {
     grid-gap: 1rem !important;
+    gap: 1rem !important;
   }
 
   .xl\:gap-5 {
     grid-gap: 1.25rem !important;
+    gap: 1.25rem !important;
   }
 
   .xl\:gap-6 {
     grid-gap: 1.5rem !important;
+    gap: 1.5rem !important;
   }
 
   .xl\:gap-8 {
     grid-gap: 2rem !important;
+    gap: 2rem !important;
   }
 
   .xl\:gap-10 {
     grid-gap: 2.5rem !important;
+    gap: 2.5rem !important;
   }
 
   .xl\:gap-12 {
     grid-gap: 3rem !important;
+    gap: 3rem !important;
   }
 
   .xl\:gap-16 {
     grid-gap: 4rem !important;
+    gap: 4rem !important;
   }
 
   .xl\:gap-20 {
     grid-gap: 5rem !important;
+    gap: 5rem !important;
   }
 
   .xl\:gap-24 {
     grid-gap: 6rem !important;
+    gap: 6rem !important;
   }
 
   .xl\:gap-32 {
     grid-gap: 8rem !important;
+    gap: 8rem !important;
   }
 
   .xl\:gap-40 {
     grid-gap: 10rem !important;
+    gap: 10rem !important;
   }
 
   .xl\:gap-48 {
     grid-gap: 12rem !important;
+    gap: 12rem !important;
   }
 
   .xl\:gap-56 {
     grid-gap: 14rem !important;
+    gap: 14rem !important;
   }
 
   .xl\:gap-64 {
     grid-gap: 16rem !important;
+    gap: 16rem !important;
   }
 
   .xl\:gap-px {
     grid-gap: 1px !important;
+    gap: 1px !important;
   }
 
   .xl\:grid-cols-1 {
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 6db193f71..dedc3f50a 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -8368,78 +8368,97 @@ video {
 
 .gap-0 {
   grid-gap: 0;
+  gap: 0;
 }
 
 .gap-1 {
   grid-gap: 0.25rem;
+  gap: 0.25rem;
 }
 
 .gap-2 {
   grid-gap: 0.5rem;
+  gap: 0.5rem;
 }
 
 .gap-3 {
   grid-gap: 0.75rem;
+  gap: 0.75rem;
 }
 
 .gap-4 {
   grid-gap: 1rem;
+  gap: 1rem;
 }
 
 .gap-5 {
   grid-gap: 1.25rem;
+  gap: 1.25rem;
 }
 
 .gap-6 {
   grid-gap: 1.5rem;
+  gap: 1.5rem;
 }
 
 .gap-8 {
   grid-gap: 2rem;
+  gap: 2rem;
 }
 
 .gap-10 {
   grid-gap: 2.5rem;
+  gap: 2.5rem;
 }
 
 .gap-12 {
   grid-gap: 3rem;
+  gap: 3rem;
 }
 
 .gap-16 {
   grid-gap: 4rem;
+  gap: 4rem;
 }
 
 .gap-20 {
   grid-gap: 5rem;
+  gap: 5rem;
 }
 
 .gap-24 {
   grid-gap: 6rem;
+  gap: 6rem;
 }
 
 .gap-32 {
   grid-gap: 8rem;
+  gap: 8rem;
 }
 
 .gap-40 {
   grid-gap: 10rem;
+  gap: 10rem;
 }
 
 .gap-48 {
   grid-gap: 12rem;
+  gap: 12rem;
 }
 
 .gap-56 {
   grid-gap: 14rem;
+  gap: 14rem;
 }
 
 .gap-64 {
   grid-gap: 16rem;
+  gap: 16rem;
 }
 
 .gap-px {
   grid-gap: 1px;
+  gap: 1px;
 }
 
 .grid-cols-1 {
@@ -17918,78 +17937,97 @@ video {
 
   .sm\:gap-0 {
     grid-gap: 0;
+    gap: 0;
   }
 
   .sm\:gap-1 {
     grid-gap: 0.25rem;
+    gap: 0.25rem;
   }
 
   .sm\:gap-2 {
     grid-gap: 0.5rem;
+    gap: 0.5rem;
   }
 
   .sm\:gap-3 {
     grid-gap: 0.75rem;
+    gap: 0.75rem;
   }
 
   .sm\:gap-4 {
     grid-gap: 1rem;
+    gap: 1rem;
   }
 
   .sm\:gap-5 {
     grid-gap: 1.25rem;
+    gap: 1.25rem;
   }
 
   .sm\:gap-6 {
     grid-gap: 1.5rem;
+    gap: 1.5rem;
   }
 
   .sm\:gap-8 {
     grid-gap: 2rem;
+    gap: 2rem;
   }
 
   .sm\:gap-10 {
     grid-gap: 2.5rem;
+    gap: 2.5rem;
   }
 
   .sm\:gap-12 {
     grid-gap: 3rem;
+    gap: 3rem;
   }
 
   .sm\:gap-16 {
     grid-gap: 4rem;
+    gap: 4rem;
   }
 
   .sm\:gap-20 {
     grid-gap: 5rem;
+    gap: 5rem;
   }
 
   .sm\:gap-24 {
     grid-gap: 6rem;
+    gap: 6rem;
   }
 
   .sm\:gap-32 {
     grid-gap: 8rem;
+    gap: 8rem;
   }
 
   .sm\:gap-40 {
     grid-gap: 10rem;
+    gap: 10rem;
   }
 
   .sm\:gap-48 {
     grid-gap: 12rem;
+    gap: 12rem;
   }
 
   .sm\:gap-56 {
     grid-gap: 14rem;
+    gap: 14rem;
   }
 
   .sm\:gap-64 {
     grid-gap: 16rem;
+    gap: 16rem;
   }
 
   .sm\:gap-px {
     grid-gap: 1px;
+    gap: 1px;
   }
 
   .sm\:grid-cols-1 {
@@ -27469,78 +27507,97 @@ video {
 
   .md\:gap-0 {
     grid-gap: 0;
+    gap: 0;
   }
 
   .md\:gap-1 {
     grid-gap: 0.25rem;
+    gap: 0.25rem;
   }
 
   .md\:gap-2 {
     grid-gap: 0.5rem;
+    gap: 0.5rem;
   }
 
   .md\:gap-3 {
     grid-gap: 0.75rem;
+    gap: 0.75rem;
   }
 
   .md\:gap-4 {
     grid-gap: 1rem;
+    gap: 1rem;
   }
 
   .md\:gap-5 {
     grid-gap: 1.25rem;
+    gap: 1.25rem;
   }
 
   .md\:gap-6 {
     grid-gap: 1.5rem;
+    gap: 1.5rem;
   }
 
   .md\:gap-8 {
     grid-gap: 2rem;
+    gap: 2rem;
   }
 
   .md\:gap-10 {
     grid-gap: 2.5rem;
+    gap: 2.5rem;
   }
 
   .md\:gap-12 {
     grid-gap: 3rem;
+    gap: 3rem;
   }
 
   .md\:gap-16 {
     grid-gap: 4rem;
+    gap: 4rem;
   }
 
   .md\:gap-20 {
     grid-gap: 5rem;
+    gap: 5rem;
   }
 
   .md\:gap-24 {
     grid-gap: 6rem;
+    gap: 6rem;
   }
 
   .md\:gap-32 {
     grid-gap: 8rem;
+    gap: 8rem;
   }
 
   .md\:gap-40 {
     grid-gap: 10rem;
+    gap: 10rem;
   }
 
   .md\:gap-48 {
     grid-gap: 12rem;
+    gap: 12rem;
   }
 
   .md\:gap-56 {
     grid-gap: 14rem;
+    gap: 14rem;
   }
 
   .md\:gap-64 {
     grid-gap: 16rem;
+    gap: 16rem;
   }
 
   .md\:gap-px {
     grid-gap: 1px;
+    gap: 1px;
   }
 
   .md\:grid-cols-1 {
@@ -37020,78 +37077,97 @@ video {
 
   .lg\:gap-0 {
     grid-gap: 0;
+    gap: 0;
   }
 
   .lg\:gap-1 {
     grid-gap: 0.25rem;
+    gap: 0.25rem;
   }
 
   .lg\:gap-2 {
     grid-gap: 0.5rem;
+    gap: 0.5rem;
   }
 
   .lg\:gap-3 {
     grid-gap: 0.75rem;
+    gap: 0.75rem;
   }
 
   .lg\:gap-4 {
     grid-gap: 1rem;
+    gap: 1rem;
   }
 
   .lg\:gap-5 {
     grid-gap: 1.25rem;
+    gap: 1.25rem;
   }
 
   .lg\:gap-6 {
     grid-gap: 1.5rem;
+    gap: 1.5rem;
   }
 
   .lg\:gap-8 {
     grid-gap: 2rem;
+    gap: 2rem;
   }
 
   .lg\:gap-10 {
     grid-gap: 2.5rem;
+    gap: 2.5rem;
   }
 
   .lg\:gap-12 {
     grid-gap: 3rem;
+    gap: 3rem;
   }
 
   .lg\:gap-16 {
     grid-gap: 4rem;
+    gap: 4rem;
   }
 
   .lg\:gap-20 {
     grid-gap: 5rem;
+    gap: 5rem;
   }
 
   .lg\:gap-24 {
     grid-gap: 6rem;
+    gap: 6rem;
   }
 
   .lg\:gap-32 {
     grid-gap: 8rem;
+    gap: 8rem;
   }
 
   .lg\:gap-40 {
     grid-gap: 10rem;
+    gap: 10rem;
   }
 
   .lg\:gap-48 {
     grid-gap: 12rem;
+    gap: 12rem;
   }
 
   .lg\:gap-56 {
     grid-gap: 14rem;
+    gap: 14rem;
   }
 
   .lg\:gap-64 {
     grid-gap: 16rem;
+    gap: 16rem;
   }
 
   .lg\:gap-px {
     grid-gap: 1px;
+    gap: 1px;
   }
 
   .lg\:grid-cols-1 {
@@ -46571,78 +46647,97 @@ video {
 
   .xl\:gap-0 {
     grid-gap: 0;
+    gap: 0;
   }
 
   .xl\:gap-1 {
     grid-gap: 0.25rem;
+    gap: 0.25rem;
   }
 
   .xl\:gap-2 {
     grid-gap: 0.5rem;
+    gap: 0.5rem;
   }
 
   .xl\:gap-3 {
     grid-gap: 0.75rem;
+    gap: 0.75rem;
   }
 
   .xl\:gap-4 {
     grid-gap: 1rem;
+    gap: 1rem;
   }
 
   .xl\:gap-5 {
     grid-gap: 1.25rem;
+    gap: 1.25rem;
   }
 
   .xl\:gap-6 {
     grid-gap: 1.5rem;
+    gap: 1.5rem;
   }
 
   .xl\:gap-8 {
     grid-gap: 2rem;
+    gap: 2rem;
   }
 
   .xl\:gap-10 {
     grid-gap: 2.5rem;
+    gap: 2.5rem;
   }
 
   .xl\:gap-12 {
     grid-gap: 3rem;
+    gap: 3rem;
   }
 
   .xl\:gap-16 {
     grid-gap: 4rem;
+    gap: 4rem;
   }
 
   .xl\:gap-20 {
     grid-gap: 5rem;
+    gap: 5rem;
   }
 
   .xl\:gap-24 {
     grid-gap: 6rem;
+    gap: 6rem;
   }
 
   .xl\:gap-32 {
     grid-gap: 8rem;
+    gap: 8rem;
   }
 
   .xl\:gap-40 {
     grid-gap: 10rem;
+    gap: 10rem;
   }
 
   .xl\:gap-48 {
     grid-gap: 12rem;
+    gap: 12rem;
   }
 
   .xl\:gap-56 {
     grid-gap: 14rem;
+    gap: 14rem;
   }
 
   .xl\:gap-64 {
     grid-gap: 16rem;
+    gap: 16rem;
   }
 
   .xl\:gap-px {
     grid-gap: 1px;
+    gap: 1px;
   }
 
   .xl\:grid-cols-1 {

From bad1033cc79d18bb8ebf1988e7d5df67d7e04f7e Mon Sep 17 00:00:00 2001
From: Florian Bouvot <florian@cometcie.fr>
Date: Fri, 27 Dec 2019 20:27:27 +0100
Subject: [PATCH 09/15] Fix box-sizing values

---
 .../fixtures/tailwind-output-important.css    | 20 +++++++++----------
 __tests__/fixtures/tailwind-output.css        | 20 +++++++++----------
 src/plugins/boxSizing.js                      |  4 ++--
 3 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index 5e2725b64..5a03feed7 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -3340,11 +3340,11 @@ video {
 }
 
 .box-border {
-  box-sizing: border !important;
+  box-sizing: border-box !important;
 }
 
 .box-content {
-  box-sizing: content !important;
+  box-sizing: content-box !important;
 }
 
 .cursor-auto {
@@ -12690,11 +12690,11 @@ video {
   }
 
   .sm\:box-border {
-    box-sizing: border !important;
+    box-sizing: border-box !important;
   }
 
   .sm\:box-content {
-    box-sizing: content !important;
+    box-sizing: content-box !important;
   }
 
   .sm\:cursor-auto {
@@ -22041,11 +22041,11 @@ video {
   }
 
   .md\:box-border {
-    box-sizing: border !important;
+    box-sizing: border-box !important;
   }
 
   .md\:box-content {
-    box-sizing: content !important;
+    box-sizing: content-box !important;
   }
 
   .md\:cursor-auto {
@@ -31392,11 +31392,11 @@ video {
   }
 
   .lg\:box-border {
-    box-sizing: border !important;
+    box-sizing: border-box !important;
   }
 
   .lg\:box-content {
-    box-sizing: content !important;
+    box-sizing: content-box !important;
   }
 
   .lg\:cursor-auto {
@@ -40743,11 +40743,11 @@ video {
   }
 
   .xl\:box-border {
-    box-sizing: border !important;
+    box-sizing: border-box !important;
   }
 
   .xl\:box-content {
-    box-sizing: content !important;
+    box-sizing: content-box !important;
   }
 
   .xl\:cursor-auto {
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index f3066a5de..bbfbcea05 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -3340,11 +3340,11 @@ video {
 }
 
 .box-border {
-  box-sizing: border;
+  box-sizing: border-box;
 }
 
 .box-content {
-  box-sizing: content;
+  box-sizing: content-box;
 }
 
 .cursor-auto {
@@ -12690,11 +12690,11 @@ video {
   }
 
   .sm\:box-border {
-    box-sizing: border;
+    box-sizing: border-box;
   }
 
   .sm\:box-content {
-    box-sizing: content;
+    box-sizing: content-box;
   }
 
   .sm\:cursor-auto {
@@ -22041,11 +22041,11 @@ video {
   }
 
   .md\:box-border {
-    box-sizing: border;
+    box-sizing: border-box;
   }
 
   .md\:box-content {
-    box-sizing: content;
+    box-sizing: content-box;
   }
 
   .md\:cursor-auto {
@@ -31392,11 +31392,11 @@ video {
   }
 
   .lg\:box-border {
-    box-sizing: border;
+    box-sizing: border-box;
   }
 
   .lg\:box-content {
-    box-sizing: content;
+    box-sizing: content-box;
   }
 
   .lg\:cursor-auto {
@@ -40743,11 +40743,11 @@ video {
   }
 
   .xl\:box-border {
-    box-sizing: border;
+    box-sizing: border-box;
   }
 
   .xl\:box-content {
-    box-sizing: content;
+    box-sizing: content-box;
   }
 
   .xl\:cursor-auto {
diff --git a/src/plugins/boxSizing.js b/src/plugins/boxSizing.js
index f843af8a6..90c944f3e 100644
--- a/src/plugins/boxSizing.js
+++ b/src/plugins/boxSizing.js
@@ -2,8 +2,8 @@ export default function() {
   return function({ addUtilities, variants }) {
     addUtilities(
       {
-        '.box-border': { 'box-sizing': 'border' },
-        '.box-content': { 'box-sizing': 'content' },
+        '.box-border': { 'box-sizing': 'border-box' },
+        '.box-content': { 'box-sizing': 'content-box' },
       },
       variants('boxSizing')
     )

From b2b68f761bb3a072c152d5f0d28b0bb34b4be0c9 Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
 <27856297+dependabot-preview[bot]@users.noreply.github.com>
Date: Mon, 30 Dec 2019 06:25:58 +0000
Subject: [PATCH 10/15] Bump eslint-config-prettier from 6.8.0 to 6.9.0

Bumps [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier) from 6.8.0 to 6.9.0.
- [Release notes](https://github.com/prettier/eslint-config-prettier/releases)
- [Changelog](https://github.com/prettier/eslint-config-prettier/blob/master/CHANGELOG.md)
- [Commits](https://github.com/prettier/eslint-config-prettier/compare/v6.8.0...v6.9.0)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index c0b0855ae..dc1fc8604 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1822,9 +1822,9 @@ eslint-config-postcss@^2.0.2:
   integrity sha1-yuHGCTzteFCJSluF++HR4jK3Kvs=
 
 eslint-config-prettier@^6.0.0:
-  version "6.8.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.8.0.tgz#36bd7559dcef9f97d7596779b38e6a879abb89d3"
-  integrity sha512-aq4M7mjjVregZ2l45O9qz6Mv6f5zVMl/IqfmUL8hNOoDAzVKYMhYPJytbqE/lPIVO1iMDXIFqjiEE59BfJZpZw==
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.9.0.tgz#430d24822e82f7deb1e22a435bfa3999fae4ad64"
+  integrity sha512-k4E14HBtcLv0uqThaI6I/n1LEqROp8XaPu6SO9Z32u5NlGRC07Enu1Bh2KEFw4FNHbekH8yzbIU9kUGxbiGmCA==
   dependencies:
     get-stdin "^6.0.0"
 

From 2babe0cb23d9f0029bce928fb9b8fb5992785681 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 30 Dec 2019 07:47:45 -0500
Subject: [PATCH 11/15] Add none/auto values for grid utilities

---
 .../fixtures/tailwind-output-important.css    | 80 +++++++++++++++++++
 __tests__/fixtures/tailwind-output.css        | 80 +++++++++++++++++++
 stubs/defaultConfig.stub.js                   |  4 +
 3 files changed, 164 insertions(+)

diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index 17ccb6ce3..95ef5b28b 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -8509,6 +8509,14 @@ video {
   grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
 }
 
+.grid-cols-none {
+  grid-template-columns: none !important;
+}
+
+.col-auto {
+  grid-column: auto !important;
+}
+
 .col-span-1 {
   grid-column: span 1 / span 1 !important;
 }
@@ -8609,6 +8617,10 @@ video {
   grid-column-start: 13 !important;
 }
 
+.col-start-auto {
+  grid-column-start: auto !important;
+}
+
 .col-end-1 {
   grid-column-end: 1 !important;
 }
@@ -8661,6 +8673,10 @@ video {
   grid-column-end: 13 !important;
 }
 
+.col-end-auto {
+  grid-column-end: auto !important;
+}
+
 .transform {
   --transform-scale-x: 1 !important;
   --transform-scale-y: 1 !important;
@@ -18078,6 +18094,14 @@ video {
     grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
   }
 
+  .sm\:grid-cols-none {
+    grid-template-columns: none !important;
+  }
+
+  .sm\:col-auto {
+    grid-column: auto !important;
+  }
+
   .sm\:col-span-1 {
     grid-column: span 1 / span 1 !important;
   }
@@ -18178,6 +18202,10 @@ video {
     grid-column-start: 13 !important;
   }
 
+  .sm\:col-start-auto {
+    grid-column-start: auto !important;
+  }
+
   .sm\:col-end-1 {
     grid-column-end: 1 !important;
   }
@@ -18230,6 +18258,10 @@ video {
     grid-column-end: 13 !important;
   }
 
+  .sm\:col-end-auto {
+    grid-column-end: auto !important;
+  }
+
   .sm\:transform {
     --transform-scale-x: 1 !important;
     --transform-scale-y: 1 !important;
@@ -27648,6 +27680,14 @@ video {
     grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
   }
 
+  .md\:grid-cols-none {
+    grid-template-columns: none !important;
+  }
+
+  .md\:col-auto {
+    grid-column: auto !important;
+  }
+
   .md\:col-span-1 {
     grid-column: span 1 / span 1 !important;
   }
@@ -27748,6 +27788,10 @@ video {
     grid-column-start: 13 !important;
   }
 
+  .md\:col-start-auto {
+    grid-column-start: auto !important;
+  }
+
   .md\:col-end-1 {
     grid-column-end: 1 !important;
   }
@@ -27800,6 +27844,10 @@ video {
     grid-column-end: 13 !important;
   }
 
+  .md\:col-end-auto {
+    grid-column-end: auto !important;
+  }
+
   .md\:transform {
     --transform-scale-x: 1 !important;
     --transform-scale-y: 1 !important;
@@ -37218,6 +37266,14 @@ video {
     grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
   }
 
+  .lg\:grid-cols-none {
+    grid-template-columns: none !important;
+  }
+
+  .lg\:col-auto {
+    grid-column: auto !important;
+  }
+
   .lg\:col-span-1 {
     grid-column: span 1 / span 1 !important;
   }
@@ -37318,6 +37374,10 @@ video {
     grid-column-start: 13 !important;
   }
 
+  .lg\:col-start-auto {
+    grid-column-start: auto !important;
+  }
+
   .lg\:col-end-1 {
     grid-column-end: 1 !important;
   }
@@ -37370,6 +37430,10 @@ video {
     grid-column-end: 13 !important;
   }
 
+  .lg\:col-end-auto {
+    grid-column-end: auto !important;
+  }
+
   .lg\:transform {
     --transform-scale-x: 1 !important;
     --transform-scale-y: 1 !important;
@@ -46788,6 +46852,14 @@ video {
     grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
   }
 
+  .xl\:grid-cols-none {
+    grid-template-columns: none !important;
+  }
+
+  .xl\:col-auto {
+    grid-column: auto !important;
+  }
+
   .xl\:col-span-1 {
     grid-column: span 1 / span 1 !important;
   }
@@ -46888,6 +46960,10 @@ video {
     grid-column-start: 13 !important;
   }
 
+  .xl\:col-start-auto {
+    grid-column-start: auto !important;
+  }
+
   .xl\:col-end-1 {
     grid-column-end: 1 !important;
   }
@@ -46940,6 +47016,10 @@ video {
     grid-column-end: 13 !important;
   }
 
+  .xl\:col-end-auto {
+    grid-column-end: auto !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 dedc3f50a..4d6bb0863 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -8509,6 +8509,14 @@ video {
   grid-template-columns: repeat(12, minmax(0, 1fr));
 }
 
+.grid-cols-none {
+  grid-template-columns: none;
+}
+
+.col-auto {
+  grid-column: auto;
+}
+
 .col-span-1 {
   grid-column: span 1 / span 1;
 }
@@ -8609,6 +8617,10 @@ video {
   grid-column-start: 13;
 }
 
+.col-start-auto {
+  grid-column-start: auto;
+}
+
 .col-end-1 {
   grid-column-end: 1;
 }
@@ -8661,6 +8673,10 @@ video {
   grid-column-end: 13;
 }
 
+.col-end-auto {
+  grid-column-end: auto;
+}
+
 .transform {
   --transform-scale-x: 1;
   --transform-scale-y: 1;
@@ -18078,6 +18094,14 @@ video {
     grid-template-columns: repeat(12, minmax(0, 1fr));
   }
 
+  .sm\:grid-cols-none {
+    grid-template-columns: none;
+  }
+
+  .sm\:col-auto {
+    grid-column: auto;
+  }
+
   .sm\:col-span-1 {
     grid-column: span 1 / span 1;
   }
@@ -18178,6 +18202,10 @@ video {
     grid-column-start: 13;
   }
 
+  .sm\:col-start-auto {
+    grid-column-start: auto;
+  }
+
   .sm\:col-end-1 {
     grid-column-end: 1;
   }
@@ -18230,6 +18258,10 @@ video {
     grid-column-end: 13;
   }
 
+  .sm\:col-end-auto {
+    grid-column-end: auto;
+  }
+
   .sm\:transform {
     --transform-scale-x: 1;
     --transform-scale-y: 1;
@@ -27648,6 +27680,14 @@ video {
     grid-template-columns: repeat(12, minmax(0, 1fr));
   }
 
+  .md\:grid-cols-none {
+    grid-template-columns: none;
+  }
+
+  .md\:col-auto {
+    grid-column: auto;
+  }
+
   .md\:col-span-1 {
     grid-column: span 1 / span 1;
   }
@@ -27748,6 +27788,10 @@ video {
     grid-column-start: 13;
   }
 
+  .md\:col-start-auto {
+    grid-column-start: auto;
+  }
+
   .md\:col-end-1 {
     grid-column-end: 1;
   }
@@ -27800,6 +27844,10 @@ video {
     grid-column-end: 13;
   }
 
+  .md\:col-end-auto {
+    grid-column-end: auto;
+  }
+
   .md\:transform {
     --transform-scale-x: 1;
     --transform-scale-y: 1;
@@ -37218,6 +37266,14 @@ video {
     grid-template-columns: repeat(12, minmax(0, 1fr));
   }
 
+  .lg\:grid-cols-none {
+    grid-template-columns: none;
+  }
+
+  .lg\:col-auto {
+    grid-column: auto;
+  }
+
   .lg\:col-span-1 {
     grid-column: span 1 / span 1;
   }
@@ -37318,6 +37374,10 @@ video {
     grid-column-start: 13;
   }
 
+  .lg\:col-start-auto {
+    grid-column-start: auto;
+  }
+
   .lg\:col-end-1 {
     grid-column-end: 1;
   }
@@ -37370,6 +37430,10 @@ video {
     grid-column-end: 13;
   }
 
+  .lg\:col-end-auto {
+    grid-column-end: auto;
+  }
+
   .lg\:transform {
     --transform-scale-x: 1;
     --transform-scale-y: 1;
@@ -46788,6 +46852,14 @@ video {
     grid-template-columns: repeat(12, minmax(0, 1fr));
   }
 
+  .xl\:grid-cols-none {
+    grid-template-columns: none;
+  }
+
+  .xl\:col-auto {
+    grid-column: auto;
+  }
+
   .xl\:col-span-1 {
     grid-column: span 1 / span 1;
   }
@@ -46888,6 +46960,10 @@ video {
     grid-column-start: 13;
   }
 
+  .xl\:col-start-auto {
+    grid-column-start: auto;
+  }
+
   .xl\:col-end-1 {
     grid-column-end: 1;
   }
@@ -46940,6 +47016,10 @@ video {
     grid-column-end: 13;
   }
 
+  .xl\:col-end-auto {
+    grid-column-end: auto;
+  }
+
   .xl\:transform {
     --transform-scale-x: 1;
     --transform-scale-y: 1;
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index 24fe9b23f..6f36f931b 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -409,6 +409,7 @@ module.exports = {
     rowGap: {},
     columnGap: {},
     gridTemplateColumns: {
+      none: 'none',
       '1': 'repeat(1, minmax(0, 1fr))',
       '2': 'repeat(2, minmax(0, 1fr))',
       '3': 'repeat(3, minmax(0, 1fr))',
@@ -423,6 +424,7 @@ module.exports = {
       '12': 'repeat(12, minmax(0, 1fr))',
     },
     gridColumn: {
+      auto: 'auto',
       'span-1': 'span 1 / span 1',
       'span-2': 'span 2 / span 2',
       'span-3': 'span 3 / span 3',
@@ -437,6 +439,7 @@ module.exports = {
       'span-12': 'span 12 / span 12',
     },
     gridColumnStart: {
+      auto: 'auto',
       '1': '1',
       '2': '2',
       '3': '3',
@@ -452,6 +455,7 @@ module.exports = {
       '13': '13',
     },
     gridColumnEnd: {
+      auto: 'auto',
       '1': '1',
       '2': '2',
       '3': '3',

From a14e53ef7ddbfcd0c8ec7be4dd1281a22a026ef2 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 30 Dec 2019 08:23:12 -0500
Subject: [PATCH 12/15] Add `grid-auto-flow` utilities

---
 .../fixtures/tailwind-output-important.css    | 80 +++++++++++++++++++
 __tests__/fixtures/tailwind-output.css        | 80 +++++++++++++++++++
 src/corePlugins.js                            |  2 +
 src/plugins/gridAutoFlow.js                   | 13 +++
 stubs/defaultConfig.stub.js                   |  1 +
 5 files changed, 176 insertions(+)
 create mode 100644 src/plugins/gridAutoFlow.js

diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index 95ef5b28b..facc08a08 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -8461,6 +8461,22 @@ video {
   gap: 1px !important;
 }
 
+.grid-flow-row {
+  grid-auto-flow: row !important;
+}
+
+.grid-flow-col {
+  grid-auto-flow: column !important;
+}
+
+.grid-flow-row-dense {
+  grid-auto-flow: row dense !important;
+}
+
+.grid-flow-col-dense {
+  grid-auto-flow: column dense !important;
+}
+
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
 }
@@ -18046,6 +18062,22 @@ video {
     gap: 1px !important;
   }
 
+  .sm\:grid-flow-row {
+    grid-auto-flow: row !important;
+  }
+
+  .sm\:grid-flow-col {
+    grid-auto-flow: column !important;
+  }
+
+  .sm\:grid-flow-row-dense {
+    grid-auto-flow: row dense !important;
+  }
+
+  .sm\:grid-flow-col-dense {
+    grid-auto-flow: column dense !important;
+  }
+
   .sm\:grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
   }
@@ -27632,6 +27664,22 @@ video {
     gap: 1px !important;
   }
 
+  .md\:grid-flow-row {
+    grid-auto-flow: row !important;
+  }
+
+  .md\:grid-flow-col {
+    grid-auto-flow: column !important;
+  }
+
+  .md\:grid-flow-row-dense {
+    grid-auto-flow: row dense !important;
+  }
+
+  .md\:grid-flow-col-dense {
+    grid-auto-flow: column dense !important;
+  }
+
   .md\:grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
   }
@@ -37218,6 +37266,22 @@ video {
     gap: 1px !important;
   }
 
+  .lg\:grid-flow-row {
+    grid-auto-flow: row !important;
+  }
+
+  .lg\:grid-flow-col {
+    grid-auto-flow: column !important;
+  }
+
+  .lg\:grid-flow-row-dense {
+    grid-auto-flow: row dense !important;
+  }
+
+  .lg\:grid-flow-col-dense {
+    grid-auto-flow: column dense !important;
+  }
+
   .lg\:grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
   }
@@ -46804,6 +46868,22 @@ video {
     gap: 1px !important;
   }
 
+  .xl\:grid-flow-row {
+    grid-auto-flow: row !important;
+  }
+
+  .xl\:grid-flow-col {
+    grid-auto-flow: column !important;
+  }
+
+  .xl\:grid-flow-row-dense {
+    grid-auto-flow: row dense !important;
+  }
+
+  .xl\:grid-flow-col-dense {
+    grid-auto-flow: column dense !important;
+  }
+
   .xl\:grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
   }
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 4d6bb0863..bfd396ce8 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -8461,6 +8461,22 @@ video {
   gap: 1px;
 }
 
+.grid-flow-row {
+  grid-auto-flow: row;
+}
+
+.grid-flow-col {
+  grid-auto-flow: column;
+}
+
+.grid-flow-row-dense {
+  grid-auto-flow: row dense;
+}
+
+.grid-flow-col-dense {
+  grid-auto-flow: column dense;
+}
+
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -18046,6 +18062,22 @@ video {
     gap: 1px;
   }
 
+  .sm\:grid-flow-row {
+    grid-auto-flow: row;
+  }
+
+  .sm\:grid-flow-col {
+    grid-auto-flow: column;
+  }
+
+  .sm\:grid-flow-row-dense {
+    grid-auto-flow: row dense;
+  }
+
+  .sm\:grid-flow-col-dense {
+    grid-auto-flow: column dense;
+  }
+
   .sm\:grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -27632,6 +27664,22 @@ video {
     gap: 1px;
   }
 
+  .md\:grid-flow-row {
+    grid-auto-flow: row;
+  }
+
+  .md\:grid-flow-col {
+    grid-auto-flow: column;
+  }
+
+  .md\:grid-flow-row-dense {
+    grid-auto-flow: row dense;
+  }
+
+  .md\:grid-flow-col-dense {
+    grid-auto-flow: column dense;
+  }
+
   .md\:grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -37218,6 +37266,22 @@ video {
     gap: 1px;
   }
 
+  .lg\:grid-flow-row {
+    grid-auto-flow: row;
+  }
+
+  .lg\:grid-flow-col {
+    grid-auto-flow: column;
+  }
+
+  .lg\:grid-flow-row-dense {
+    grid-auto-flow: row dense;
+  }
+
+  .lg\:grid-flow-col-dense {
+    grid-auto-flow: column dense;
+  }
+
   .lg\:grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -46804,6 +46868,22 @@ video {
     gap: 1px;
   }
 
+  .xl\:grid-flow-row {
+    grid-auto-flow: row;
+  }
+
+  .xl\:grid-flow-col {
+    grid-auto-flow: column;
+  }
+
+  .xl\:grid-flow-row-dense {
+    grid-auto-flow: row dense;
+  }
+
+  .xl\:grid-flow-col-dense {
+    grid-auto-flow: column dense;
+  }
+
   .xl\:grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
diff --git a/src/corePlugins.js b/src/corePlugins.js
index 6e7c85d5d..fc61da7ba 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -74,6 +74,7 @@ import translate from './plugins/translate'
 import gap from './plugins/gap'
 import columnGap from './plugins/columnGap'
 import rowGap from './plugins/rowGap'
+import gridAutoFlow from './plugins/gridAutoFlow'
 import gridTemplateColumns from './plugins/gridTemplateColumns'
 import gridColumn from './plugins/gridColumn'
 import gridColumnStart from './plugins/gridColumnStart'
@@ -158,6 +159,7 @@ export default function({ corePlugins: corePluginConfig }) {
     gap,
     columnGap,
     rowGap,
+    gridAutoFlow,
     gridTemplateColumns,
     gridColumn,
     gridColumnStart,
diff --git a/src/plugins/gridAutoFlow.js b/src/plugins/gridAutoFlow.js
new file mode 100644
index 000000000..a2fa74c44
--- /dev/null
+++ b/src/plugins/gridAutoFlow.js
@@ -0,0 +1,13 @@
+export default function() {
+  return function({ addUtilities, variants }) {
+    addUtilities(
+      {
+        '.grid-flow-row': { gridAutoFlow: 'row' },
+        '.grid-flow-col': { gridAutoFlow: 'column' },
+        '.grid-flow-row-dense': { gridAutoFlow: 'row dense' },
+        '.grid-flow-col-dense': { gridAutoFlow: 'column dense' },
+      },
+      variants('gridAutoFlow')
+    )
+  }
+}
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index 6f36f931b..ab7acb76c 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -585,6 +585,7 @@ module.exports = {
     gap: ['responsive'],
     columnGap: ['responsive'],
     rowGap: ['responsive'],
+    gridAutoFlow: ['responsive'],
     gridTemplateColumns: ['responsive'],
     gridColumn: ['responsive'],
     gridColumnStart: ['responsive'],

From a5fb2dfc17579f8b54eefb78fe524af3d59181b8 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 30 Dec 2019 09:18:00 -0500
Subject: [PATCH 13/15] Change `stroke-w-{size}` to `stroke-{size}`

---
 .../fixtures/tailwind-output-important.css    | 50 +++++++++----------
 __tests__/fixtures/tailwind-output.css        | 50 +++++++++----------
 src/plugins/strokeWidth.js                    |  7 ++-
 3 files changed, 53 insertions(+), 54 deletions(-)

diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index 41f96a257..cfaf9f7cd 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -6861,23 +6861,23 @@ video {
   stroke: currentColor !important;
 }
 
-.stroke-w-0 {
+.stroke-0 {
   stroke-width: 0 !important;
 }
 
-.stroke-w-1 {
+.stroke-1 {
   stroke-width: 1px !important;
 }
 
-.stroke-w-2 {
+.stroke-2 {
   stroke-width: 2px !important;
 }
 
-.stroke-w-3 {
+.stroke-3 {
   stroke-width: 3px !important;
 }
 
-.stroke-w-4 {
+.stroke-4 {
   stroke-width: 4px !important;
 }
 
@@ -16231,23 +16231,23 @@ video {
     stroke: currentColor !important;
   }
 
-  .sm\:stroke-w-0 {
+  .sm\:stroke-0 {
     stroke-width: 0 !important;
   }
 
-  .sm\:stroke-w-1 {
+  .sm\:stroke-1 {
     stroke-width: 1px !important;
   }
 
-  .sm\:stroke-w-2 {
+  .sm\:stroke-2 {
     stroke-width: 2px !important;
   }
 
-  .sm\:stroke-w-3 {
+  .sm\:stroke-3 {
     stroke-width: 3px !important;
   }
 
-  .sm\:stroke-w-4 {
+  .sm\:stroke-4 {
     stroke-width: 4px !important;
   }
 
@@ -25602,23 +25602,23 @@ video {
     stroke: currentColor !important;
   }
 
-  .md\:stroke-w-0 {
+  .md\:stroke-0 {
     stroke-width: 0 !important;
   }
 
-  .md\:stroke-w-1 {
+  .md\:stroke-1 {
     stroke-width: 1px !important;
   }
 
-  .md\:stroke-w-2 {
+  .md\:stroke-2 {
     stroke-width: 2px !important;
   }
 
-  .md\:stroke-w-3 {
+  .md\:stroke-3 {
     stroke-width: 3px !important;
   }
 
-  .md\:stroke-w-4 {
+  .md\:stroke-4 {
     stroke-width: 4px !important;
   }
 
@@ -34973,23 +34973,23 @@ video {
     stroke: currentColor !important;
   }
 
-  .lg\:stroke-w-0 {
+  .lg\:stroke-0 {
     stroke-width: 0 !important;
   }
 
-  .lg\:stroke-w-1 {
+  .lg\:stroke-1 {
     stroke-width: 1px !important;
   }
 
-  .lg\:stroke-w-2 {
+  .lg\:stroke-2 {
     stroke-width: 2px !important;
   }
 
-  .lg\:stroke-w-3 {
+  .lg\:stroke-3 {
     stroke-width: 3px !important;
   }
 
-  .lg\:stroke-w-4 {
+  .lg\:stroke-4 {
     stroke-width: 4px !important;
   }
 
@@ -44344,23 +44344,23 @@ video {
     stroke: currentColor !important;
   }
 
-  .xl\:stroke-w-0 {
+  .xl\:stroke-0 {
     stroke-width: 0 !important;
   }
 
-  .xl\:stroke-w-1 {
+  .xl\:stroke-1 {
     stroke-width: 1px !important;
   }
 
-  .xl\:stroke-w-2 {
+  .xl\:stroke-2 {
     stroke-width: 2px !important;
   }
 
-  .xl\:stroke-w-3 {
+  .xl\:stroke-3 {
     stroke-width: 3px !important;
   }
 
-  .xl\:stroke-w-4 {
+  .xl\:stroke-4 {
     stroke-width: 4px !important;
   }
 
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index f225bc6ad..cb1c19e73 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -6861,23 +6861,23 @@ video {
   stroke: currentColor;
 }
 
-.stroke-w-0 {
+.stroke-0 {
   stroke-width: 0;
 }
 
-.stroke-w-1 {
+.stroke-1 {
   stroke-width: 1px;
 }
 
-.stroke-w-2 {
+.stroke-2 {
   stroke-width: 2px;
 }
 
-.stroke-w-3 {
+.stroke-3 {
   stroke-width: 3px;
 }
 
-.stroke-w-4 {
+.stroke-4 {
   stroke-width: 4px;
 }
 
@@ -16231,23 +16231,23 @@ video {
     stroke: currentColor;
   }
 
-  .sm\:stroke-w-0 {
+  .sm\:stroke-0 {
     stroke-width: 0;
   }
 
-  .sm\:stroke-w-1 {
+  .sm\:stroke-1 {
     stroke-width: 1px;
   }
 
-  .sm\:stroke-w-2 {
+  .sm\:stroke-2 {
     stroke-width: 2px;
   }
 
-  .sm\:stroke-w-3 {
+  .sm\:stroke-3 {
     stroke-width: 3px;
   }
 
-  .sm\:stroke-w-4 {
+  .sm\:stroke-4 {
     stroke-width: 4px;
   }
 
@@ -25602,23 +25602,23 @@ video {
     stroke: currentColor;
   }
 
-  .md\:stroke-w-0 {
+  .md\:stroke-0 {
     stroke-width: 0;
   }
 
-  .md\:stroke-w-1 {
+  .md\:stroke-1 {
     stroke-width: 1px;
   }
 
-  .md\:stroke-w-2 {
+  .md\:stroke-2 {
     stroke-width: 2px;
   }
 
-  .md\:stroke-w-3 {
+  .md\:stroke-3 {
     stroke-width: 3px;
   }
 
-  .md\:stroke-w-4 {
+  .md\:stroke-4 {
     stroke-width: 4px;
   }
 
@@ -34973,23 +34973,23 @@ video {
     stroke: currentColor;
   }
 
-  .lg\:stroke-w-0 {
+  .lg\:stroke-0 {
     stroke-width: 0;
   }
 
-  .lg\:stroke-w-1 {
+  .lg\:stroke-1 {
     stroke-width: 1px;
   }
 
-  .lg\:stroke-w-2 {
+  .lg\:stroke-2 {
     stroke-width: 2px;
   }
 
-  .lg\:stroke-w-3 {
+  .lg\:stroke-3 {
     stroke-width: 3px;
   }
 
-  .lg\:stroke-w-4 {
+  .lg\:stroke-4 {
     stroke-width: 4px;
   }
 
@@ -44344,23 +44344,23 @@ video {
     stroke: currentColor;
   }
 
-  .xl\:stroke-w-0 {
+  .xl\:stroke-0 {
     stroke-width: 0;
   }
 
-  .xl\:stroke-w-1 {
+  .xl\:stroke-1 {
     stroke-width: 1px;
   }
 
-  .xl\:stroke-w-2 {
+  .xl\:stroke-2 {
     stroke-width: 2px;
   }
 
-  .xl\:stroke-w-3 {
+  .xl\:stroke-3 {
     stroke-width: 3px;
   }
 
-  .xl\:stroke-w-4 {
+  .xl\:stroke-4 {
     stroke-width: 4px;
   }
 
diff --git a/src/plugins/strokeWidth.js b/src/plugins/strokeWidth.js
index 05a02a56a..79db44fcd 100644
--- a/src/plugins/strokeWidth.js
+++ b/src/plugins/strokeWidth.js
@@ -1,14 +1,13 @@
 import _ from 'lodash'
-import flattenColorPalette from '../util/flattenColorPalette'
 
 export default function() {
   return function({ addUtilities, e, theme, variants }) {
     const utilities = _.fromPairs(
-      _.map(flattenColorPalette(theme('strokeWidth')), (value, modifier) => {
+      _.map(theme('strokeWidth'), (value, modifier) => {
         return [
-          `.${e(`stroke-w-${modifier}`)}`,
+          `.${e(`stroke-${modifier}`)}`,
           {
-            'stroke-width': value,
+            strokeWidth: value,
           },
         ]
       })

From 5187825ba7aa99782362ae36c3372deed9348209 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 30 Dec 2019 09:18:47 -0500
Subject: [PATCH 14/15] Remove 3px and 4px stroke widths from default config

---
 .../fixtures/tailwind-output-important.css    | 40 -------------------
 __tests__/fixtures/tailwind-output.css        | 40 -------------------
 stubs/defaultConfig.stub.js                   |  4 +-
 3 files changed, 1 insertion(+), 83 deletions(-)

diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index cfaf9f7cd..7e5ec4613 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -6873,14 +6873,6 @@ video {
   stroke-width: 2px !important;
 }
 
-.stroke-3 {
-  stroke-width: 3px !important;
-}
-
-.stroke-4 {
-  stroke-width: 4px !important;
-}
-
 .table-auto {
   table-layout: auto !important;
 }
@@ -16243,14 +16235,6 @@ video {
     stroke-width: 2px !important;
   }
 
-  .sm\:stroke-3 {
-    stroke-width: 3px !important;
-  }
-
-  .sm\:stroke-4 {
-    stroke-width: 4px !important;
-  }
-
   .sm\:table-auto {
     table-layout: auto !important;
   }
@@ -25614,14 +25598,6 @@ video {
     stroke-width: 2px !important;
   }
 
-  .md\:stroke-3 {
-    stroke-width: 3px !important;
-  }
-
-  .md\:stroke-4 {
-    stroke-width: 4px !important;
-  }
-
   .md\:table-auto {
     table-layout: auto !important;
   }
@@ -34985,14 +34961,6 @@ video {
     stroke-width: 2px !important;
   }
 
-  .lg\:stroke-3 {
-    stroke-width: 3px !important;
-  }
-
-  .lg\:stroke-4 {
-    stroke-width: 4px !important;
-  }
-
   .lg\:table-auto {
     table-layout: auto !important;
   }
@@ -44356,14 +44324,6 @@ video {
     stroke-width: 2px !important;
   }
 
-  .xl\:stroke-3 {
-    stroke-width: 3px !important;
-  }
-
-  .xl\:stroke-4 {
-    stroke-width: 4px !important;
-  }
-
   .xl\:table-auto {
     table-layout: auto !important;
   }
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index cb1c19e73..eb5e0c67b 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -6873,14 +6873,6 @@ video {
   stroke-width: 2px;
 }
 
-.stroke-3 {
-  stroke-width: 3px;
-}
-
-.stroke-4 {
-  stroke-width: 4px;
-}
-
 .table-auto {
   table-layout: auto;
 }
@@ -16243,14 +16235,6 @@ video {
     stroke-width: 2px;
   }
 
-  .sm\:stroke-3 {
-    stroke-width: 3px;
-  }
-
-  .sm\:stroke-4 {
-    stroke-width: 4px;
-  }
-
   .sm\:table-auto {
     table-layout: auto;
   }
@@ -25614,14 +25598,6 @@ video {
     stroke-width: 2px;
   }
 
-  .md\:stroke-3 {
-    stroke-width: 3px;
-  }
-
-  .md\:stroke-4 {
-    stroke-width: 4px;
-  }
-
   .md\:table-auto {
     table-layout: auto;
   }
@@ -34985,14 +34961,6 @@ video {
     stroke-width: 2px;
   }
 
-  .lg\:stroke-3 {
-    stroke-width: 3px;
-  }
-
-  .lg\:stroke-4 {
-    stroke-width: 4px;
-  }
-
   .lg\:table-auto {
     table-layout: auto;
   }
@@ -44356,14 +44324,6 @@ video {
     stroke-width: 2px;
   }
 
-  .xl\:stroke-3 {
-    stroke-width: 3px;
-  }
-
-  .xl\:stroke-4 {
-    stroke-width: 4px;
-  }
-
   .xl\:table-auto {
     table-layout: auto;
   }
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index 4a5c005f0..4e6309b14 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -369,11 +369,9 @@ module.exports = {
       current: 'currentColor',
     },
     strokeWidth: {
-      '0': '0',      
+      '0': '0',
       '1': '1px',
       '2': '2px',
-      '3': '3px',
-      '4': '4px',
     },
     textColor: theme => theme('colors'),
     width: theme => ({

From bbe23fdba2adb013b6e3f8ac5fa5192226f4241f Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 30 Dec 2019 09:20:28 -0500
Subject: [PATCH 15/15] Remove units from stroke width

---
 .../fixtures/tailwind-output-important.css    | 20 +++++++++----------
 __tests__/fixtures/tailwind-output.css        | 20 +++++++++----------
 stubs/defaultConfig.stub.js                   |  4 ++--
 3 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index 7e5ec4613..880a08ed7 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -6866,11 +6866,11 @@ video {
 }
 
 .stroke-1 {
-  stroke-width: 1px !important;
+  stroke-width: 1 !important;
 }
 
 .stroke-2 {
-  stroke-width: 2px !important;
+  stroke-width: 2 !important;
 }
 
 .table-auto {
@@ -16228,11 +16228,11 @@ video {
   }
 
   .sm\:stroke-1 {
-    stroke-width: 1px !important;
+    stroke-width: 1 !important;
   }
 
   .sm\:stroke-2 {
-    stroke-width: 2px !important;
+    stroke-width: 2 !important;
   }
 
   .sm\:table-auto {
@@ -25591,11 +25591,11 @@ video {
   }
 
   .md\:stroke-1 {
-    stroke-width: 1px !important;
+    stroke-width: 1 !important;
   }
 
   .md\:stroke-2 {
-    stroke-width: 2px !important;
+    stroke-width: 2 !important;
   }
 
   .md\:table-auto {
@@ -34954,11 +34954,11 @@ video {
   }
 
   .lg\:stroke-1 {
-    stroke-width: 1px !important;
+    stroke-width: 1 !important;
   }
 
   .lg\:stroke-2 {
-    stroke-width: 2px !important;
+    stroke-width: 2 !important;
   }
 
   .lg\:table-auto {
@@ -44317,11 +44317,11 @@ video {
   }
 
   .xl\:stroke-1 {
-    stroke-width: 1px !important;
+    stroke-width: 1 !important;
   }
 
   .xl\:stroke-2 {
-    stroke-width: 2px !important;
+    stroke-width: 2 !important;
   }
 
   .xl\:table-auto {
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index eb5e0c67b..025a7a0a2 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -6866,11 +6866,11 @@ video {
 }
 
 .stroke-1 {
-  stroke-width: 1px;
+  stroke-width: 1;
 }
 
 .stroke-2 {
-  stroke-width: 2px;
+  stroke-width: 2;
 }
 
 .table-auto {
@@ -16228,11 +16228,11 @@ video {
   }
 
   .sm\:stroke-1 {
-    stroke-width: 1px;
+    stroke-width: 1;
   }
 
   .sm\:stroke-2 {
-    stroke-width: 2px;
+    stroke-width: 2;
   }
 
   .sm\:table-auto {
@@ -25591,11 +25591,11 @@ video {
   }
 
   .md\:stroke-1 {
-    stroke-width: 1px;
+    stroke-width: 1;
   }
 
   .md\:stroke-2 {
-    stroke-width: 2px;
+    stroke-width: 2;
   }
 
   .md\:table-auto {
@@ -34954,11 +34954,11 @@ video {
   }
 
   .lg\:stroke-1 {
-    stroke-width: 1px;
+    stroke-width: 1;
   }
 
   .lg\:stroke-2 {
-    stroke-width: 2px;
+    stroke-width: 2;
   }
 
   .lg\:table-auto {
@@ -44317,11 +44317,11 @@ video {
   }
 
   .xl\:stroke-1 {
-    stroke-width: 1px;
+    stroke-width: 1;
   }
 
   .xl\:stroke-2 {
-    stroke-width: 2px;
+    stroke-width: 2;
   }
 
   .xl\:table-auto {
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index 4e6309b14..b9d34e9ab 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -370,8 +370,8 @@ module.exports = {
     },
     strokeWidth: {
       '0': '0',
-      '1': '1px',
-      '2': '2px',
+      '1': '1',
+      '2': '2',
     },
     textColor: theme => theme('colors'),
     width: theme => ({