From b3b06e8d55b046994401ff3d58eccfbb1d171dd9 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 20 Apr 2020 14:54:31 -0400
Subject: [PATCH] Add negative `space` utility support

---
 .../fixtures/tailwind-output-important.css    | 216 ++++++++++++++++++
 __tests__/fixtures/tailwind-output.css        | 216 ++++++++++++++++++
 __tests__/plugins/space.test.js               |  22 ++
 src/plugins/space.js                          |   5 +-
 stubs/defaultConfig.stub.js                   |   5 +-
 5 files changed, 461 insertions(+), 3 deletions(-)

diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index 27010b9d3..0887cd0bb 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -834,6 +834,222 @@ video {
   margin-left: calc(1px * calc(1 - var(--space-y-reverse))) !important;
 }
 
+.-space-y-1 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0 !important;
+  margin-top: calc(-0.25rem * calc(1 - var(--space-y-reverse))) !important;
+  margin-bottom: calc(-0.25rem * var(--space-y-reverse)) !important;
+}
+
+.-space-x-1 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0 !important;
+  margin-right: calc(-0.25rem * var(--space-y-reverse)) !important;
+  margin-left: calc(-0.25rem * calc(1 - var(--space-y-reverse))) !important;
+}
+
+.-space-y-2 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0 !important;
+  margin-top: calc(-0.5rem * calc(1 - var(--space-y-reverse))) !important;
+  margin-bottom: calc(-0.5rem * var(--space-y-reverse)) !important;
+}
+
+.-space-x-2 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0 !important;
+  margin-right: calc(-0.5rem * var(--space-y-reverse)) !important;
+  margin-left: calc(-0.5rem * calc(1 - var(--space-y-reverse))) !important;
+}
+
+.-space-y-3 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0 !important;
+  margin-top: calc(-0.75rem * calc(1 - var(--space-y-reverse))) !important;
+  margin-bottom: calc(-0.75rem * var(--space-y-reverse)) !important;
+}
+
+.-space-x-3 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0 !important;
+  margin-right: calc(-0.75rem * var(--space-y-reverse)) !important;
+  margin-left: calc(-0.75rem * calc(1 - var(--space-y-reverse))) !important;
+}
+
+.-space-y-4 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0 !important;
+  margin-top: calc(-1rem * calc(1 - var(--space-y-reverse))) !important;
+  margin-bottom: calc(-1rem * var(--space-y-reverse)) !important;
+}
+
+.-space-x-4 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0 !important;
+  margin-right: calc(-1rem * var(--space-y-reverse)) !important;
+  margin-left: calc(-1rem * calc(1 - var(--space-y-reverse))) !important;
+}
+
+.-space-y-5 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0 !important;
+  margin-top: calc(-1.25rem * calc(1 - var(--space-y-reverse))) !important;
+  margin-bottom: calc(-1.25rem * var(--space-y-reverse)) !important;
+}
+
+.-space-x-5 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0 !important;
+  margin-right: calc(-1.25rem * var(--space-y-reverse)) !important;
+  margin-left: calc(-1.25rem * calc(1 - var(--space-y-reverse))) !important;
+}
+
+.-space-y-6 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0 !important;
+  margin-top: calc(-1.5rem * calc(1 - var(--space-y-reverse))) !important;
+  margin-bottom: calc(-1.5rem * var(--space-y-reverse)) !important;
+}
+
+.-space-x-6 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0 !important;
+  margin-right: calc(-1.5rem * var(--space-y-reverse)) !important;
+  margin-left: calc(-1.5rem * calc(1 - var(--space-y-reverse))) !important;
+}
+
+.-space-y-8 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0 !important;
+  margin-top: calc(-2rem * calc(1 - var(--space-y-reverse))) !important;
+  margin-bottom: calc(-2rem * var(--space-y-reverse)) !important;
+}
+
+.-space-x-8 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0 !important;
+  margin-right: calc(-2rem * var(--space-y-reverse)) !important;
+  margin-left: calc(-2rem * calc(1 - var(--space-y-reverse))) !important;
+}
+
+.-space-y-10 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0 !important;
+  margin-top: calc(-2.5rem * calc(1 - var(--space-y-reverse))) !important;
+  margin-bottom: calc(-2.5rem * var(--space-y-reverse)) !important;
+}
+
+.-space-x-10 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0 !important;
+  margin-right: calc(-2.5rem * var(--space-y-reverse)) !important;
+  margin-left: calc(-2.5rem * calc(1 - var(--space-y-reverse))) !important;
+}
+
+.-space-y-12 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0 !important;
+  margin-top: calc(-3rem * calc(1 - var(--space-y-reverse))) !important;
+  margin-bottom: calc(-3rem * var(--space-y-reverse)) !important;
+}
+
+.-space-x-12 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0 !important;
+  margin-right: calc(-3rem * var(--space-y-reverse)) !important;
+  margin-left: calc(-3rem * calc(1 - var(--space-y-reverse))) !important;
+}
+
+.-space-y-16 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0 !important;
+  margin-top: calc(-4rem * calc(1 - var(--space-y-reverse))) !important;
+  margin-bottom: calc(-4rem * var(--space-y-reverse)) !important;
+}
+
+.-space-x-16 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0 !important;
+  margin-right: calc(-4rem * var(--space-y-reverse)) !important;
+  margin-left: calc(-4rem * calc(1 - var(--space-y-reverse))) !important;
+}
+
+.-space-y-20 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0 !important;
+  margin-top: calc(-5rem * calc(1 - var(--space-y-reverse))) !important;
+  margin-bottom: calc(-5rem * var(--space-y-reverse)) !important;
+}
+
+.-space-x-20 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0 !important;
+  margin-right: calc(-5rem * var(--space-y-reverse)) !important;
+  margin-left: calc(-5rem * calc(1 - var(--space-y-reverse))) !important;
+}
+
+.-space-y-24 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0 !important;
+  margin-top: calc(-6rem * calc(1 - var(--space-y-reverse))) !important;
+  margin-bottom: calc(-6rem * var(--space-y-reverse)) !important;
+}
+
+.-space-x-24 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0 !important;
+  margin-right: calc(-6rem * var(--space-y-reverse)) !important;
+  margin-left: calc(-6rem * calc(1 - var(--space-y-reverse))) !important;
+}
+
+.-space-y-32 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0 !important;
+  margin-top: calc(-8rem * calc(1 - var(--space-y-reverse))) !important;
+  margin-bottom: calc(-8rem * var(--space-y-reverse)) !important;
+}
+
+.-space-x-32 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0 !important;
+  margin-right: calc(-8rem * var(--space-y-reverse)) !important;
+  margin-left: calc(-8rem * calc(1 - var(--space-y-reverse))) !important;
+}
+
+.-space-y-40 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0 !important;
+  margin-top: calc(-10rem * calc(1 - var(--space-y-reverse))) !important;
+  margin-bottom: calc(-10rem * var(--space-y-reverse)) !important;
+}
+
+.-space-x-40 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0 !important;
+  margin-right: calc(-10rem * var(--space-y-reverse)) !important;
+  margin-left: calc(-10rem * calc(1 - var(--space-y-reverse))) !important;
+}
+
+.-space-y-48 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0 !important;
+  margin-top: calc(-12rem * calc(1 - var(--space-y-reverse))) !important;
+  margin-bottom: calc(-12rem * var(--space-y-reverse)) !important;
+}
+
+.-space-x-48 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0 !important;
+  margin-right: calc(-12rem * var(--space-y-reverse)) !important;
+  margin-left: calc(-12rem * calc(1 - var(--space-y-reverse))) !important;
+}
+
+.-space-y-56 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0 !important;
+  margin-top: calc(-14rem * calc(1 - var(--space-y-reverse))) !important;
+  margin-bottom: calc(-14rem * var(--space-y-reverse)) !important;
+}
+
+.-space-x-56 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0 !important;
+  margin-right: calc(-14rem * var(--space-y-reverse)) !important;
+  margin-left: calc(-14rem * calc(1 - var(--space-y-reverse))) !important;
+}
+
+.-space-y-64 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0 !important;
+  margin-top: calc(-16rem * calc(1 - var(--space-y-reverse))) !important;
+  margin-bottom: calc(-16rem * var(--space-y-reverse)) !important;
+}
+
+.-space-x-64 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0 !important;
+  margin-right: calc(-16rem * var(--space-y-reverse)) !important;
+  margin-left: calc(-16rem * calc(1 - var(--space-y-reverse))) !important;
+}
+
+.-space-y-px > :not(template) ~ :not(template) {
+  --space-y-reverse: 0 !important;
+  margin-top: calc(-1px * calc(1 - var(--space-y-reverse))) !important;
+  margin-bottom: calc(-1px * var(--space-y-reverse)) !important;
+}
+
+.-space-x-px > :not(template) ~ :not(template) {
+  --space-x-reverse: 0 !important;
+  margin-right: calc(-1px * var(--space-y-reverse)) !important;
+  margin-left: calc(-1px * calc(1 - var(--space-y-reverse))) !important;
+}
+
 .space-y-reverse > :not(template) ~ :not(template) {
   --space-y-reverse: 1 !important;
 }
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index b2424674b..759531bd4 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -834,6 +834,222 @@ video {
   margin-left: calc(1px * calc(1 - var(--space-y-reverse)));
 }
 
+.-space-y-1 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0;
+  margin-top: calc(-0.25rem * calc(1 - var(--space-y-reverse)));
+  margin-bottom: calc(-0.25rem * var(--space-y-reverse));
+}
+
+.-space-x-1 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0;
+  margin-right: calc(-0.25rem * var(--space-y-reverse));
+  margin-left: calc(-0.25rem * calc(1 - var(--space-y-reverse)));
+}
+
+.-space-y-2 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0;
+  margin-top: calc(-0.5rem * calc(1 - var(--space-y-reverse)));
+  margin-bottom: calc(-0.5rem * var(--space-y-reverse));
+}
+
+.-space-x-2 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0;
+  margin-right: calc(-0.5rem * var(--space-y-reverse));
+  margin-left: calc(-0.5rem * calc(1 - var(--space-y-reverse)));
+}
+
+.-space-y-3 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0;
+  margin-top: calc(-0.75rem * calc(1 - var(--space-y-reverse)));
+  margin-bottom: calc(-0.75rem * var(--space-y-reverse));
+}
+
+.-space-x-3 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0;
+  margin-right: calc(-0.75rem * var(--space-y-reverse));
+  margin-left: calc(-0.75rem * calc(1 - var(--space-y-reverse)));
+}
+
+.-space-y-4 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0;
+  margin-top: calc(-1rem * calc(1 - var(--space-y-reverse)));
+  margin-bottom: calc(-1rem * var(--space-y-reverse));
+}
+
+.-space-x-4 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0;
+  margin-right: calc(-1rem * var(--space-y-reverse));
+  margin-left: calc(-1rem * calc(1 - var(--space-y-reverse)));
+}
+
+.-space-y-5 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0;
+  margin-top: calc(-1.25rem * calc(1 - var(--space-y-reverse)));
+  margin-bottom: calc(-1.25rem * var(--space-y-reverse));
+}
+
+.-space-x-5 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0;
+  margin-right: calc(-1.25rem * var(--space-y-reverse));
+  margin-left: calc(-1.25rem * calc(1 - var(--space-y-reverse)));
+}
+
+.-space-y-6 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0;
+  margin-top: calc(-1.5rem * calc(1 - var(--space-y-reverse)));
+  margin-bottom: calc(-1.5rem * var(--space-y-reverse));
+}
+
+.-space-x-6 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0;
+  margin-right: calc(-1.5rem * var(--space-y-reverse));
+  margin-left: calc(-1.5rem * calc(1 - var(--space-y-reverse)));
+}
+
+.-space-y-8 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0;
+  margin-top: calc(-2rem * calc(1 - var(--space-y-reverse)));
+  margin-bottom: calc(-2rem * var(--space-y-reverse));
+}
+
+.-space-x-8 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0;
+  margin-right: calc(-2rem * var(--space-y-reverse));
+  margin-left: calc(-2rem * calc(1 - var(--space-y-reverse)));
+}
+
+.-space-y-10 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0;
+  margin-top: calc(-2.5rem * calc(1 - var(--space-y-reverse)));
+  margin-bottom: calc(-2.5rem * var(--space-y-reverse));
+}
+
+.-space-x-10 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0;
+  margin-right: calc(-2.5rem * var(--space-y-reverse));
+  margin-left: calc(-2.5rem * calc(1 - var(--space-y-reverse)));
+}
+
+.-space-y-12 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0;
+  margin-top: calc(-3rem * calc(1 - var(--space-y-reverse)));
+  margin-bottom: calc(-3rem * var(--space-y-reverse));
+}
+
+.-space-x-12 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0;
+  margin-right: calc(-3rem * var(--space-y-reverse));
+  margin-left: calc(-3rem * calc(1 - var(--space-y-reverse)));
+}
+
+.-space-y-16 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0;
+  margin-top: calc(-4rem * calc(1 - var(--space-y-reverse)));
+  margin-bottom: calc(-4rem * var(--space-y-reverse));
+}
+
+.-space-x-16 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0;
+  margin-right: calc(-4rem * var(--space-y-reverse));
+  margin-left: calc(-4rem * calc(1 - var(--space-y-reverse)));
+}
+
+.-space-y-20 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0;
+  margin-top: calc(-5rem * calc(1 - var(--space-y-reverse)));
+  margin-bottom: calc(-5rem * var(--space-y-reverse));
+}
+
+.-space-x-20 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0;
+  margin-right: calc(-5rem * var(--space-y-reverse));
+  margin-left: calc(-5rem * calc(1 - var(--space-y-reverse)));
+}
+
+.-space-y-24 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0;
+  margin-top: calc(-6rem * calc(1 - var(--space-y-reverse)));
+  margin-bottom: calc(-6rem * var(--space-y-reverse));
+}
+
+.-space-x-24 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0;
+  margin-right: calc(-6rem * var(--space-y-reverse));
+  margin-left: calc(-6rem * calc(1 - var(--space-y-reverse)));
+}
+
+.-space-y-32 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0;
+  margin-top: calc(-8rem * calc(1 - var(--space-y-reverse)));
+  margin-bottom: calc(-8rem * var(--space-y-reverse));
+}
+
+.-space-x-32 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0;
+  margin-right: calc(-8rem * var(--space-y-reverse));
+  margin-left: calc(-8rem * calc(1 - var(--space-y-reverse)));
+}
+
+.-space-y-40 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0;
+  margin-top: calc(-10rem * calc(1 - var(--space-y-reverse)));
+  margin-bottom: calc(-10rem * var(--space-y-reverse));
+}
+
+.-space-x-40 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0;
+  margin-right: calc(-10rem * var(--space-y-reverse));
+  margin-left: calc(-10rem * calc(1 - var(--space-y-reverse)));
+}
+
+.-space-y-48 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0;
+  margin-top: calc(-12rem * calc(1 - var(--space-y-reverse)));
+  margin-bottom: calc(-12rem * var(--space-y-reverse));
+}
+
+.-space-x-48 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0;
+  margin-right: calc(-12rem * var(--space-y-reverse));
+  margin-left: calc(-12rem * calc(1 - var(--space-y-reverse)));
+}
+
+.-space-y-56 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0;
+  margin-top: calc(-14rem * calc(1 - var(--space-y-reverse)));
+  margin-bottom: calc(-14rem * var(--space-y-reverse));
+}
+
+.-space-x-56 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0;
+  margin-right: calc(-14rem * var(--space-y-reverse));
+  margin-left: calc(-14rem * calc(1 - var(--space-y-reverse)));
+}
+
+.-space-y-64 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0;
+  margin-top: calc(-16rem * calc(1 - var(--space-y-reverse)));
+  margin-bottom: calc(-16rem * var(--space-y-reverse));
+}
+
+.-space-x-64 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0;
+  margin-right: calc(-16rem * var(--space-y-reverse));
+  margin-left: calc(-16rem * calc(1 - var(--space-y-reverse)));
+}
+
+.-space-y-px > :not(template) ~ :not(template) {
+  --space-y-reverse: 0;
+  margin-top: calc(-1px * calc(1 - var(--space-y-reverse)));
+  margin-bottom: calc(-1px * var(--space-y-reverse));
+}
+
+.-space-x-px > :not(template) ~ :not(template) {
+  --space-x-reverse: 0;
+  margin-right: calc(-1px * var(--space-y-reverse));
+  margin-left: calc(-1px * calc(1 - var(--space-y-reverse)));
+}
+
 .space-y-reverse > :not(template) ~ :not(template) {
   --space-y-reverse: 1;
 }
diff --git a/__tests__/plugins/space.test.js b/__tests__/plugins/space.test.js
index b4c2e5540..22b907c93 100644
--- a/__tests__/plugins/space.test.js
+++ b/__tests__/plugins/space.test.js
@@ -8,6 +8,8 @@ test('generating space utilities', () => {
         '1': '1px',
         '2': '2px',
         '4': '4px',
+        '-2': '-2px',
+        '-1': '-1px',
       },
     },
     variants: {
@@ -50,6 +52,26 @@ test('generating space utilities', () => {
           'margin-right': 'calc(4px * var(--space-y-reverse))',
           'margin-left': 'calc(4px * calc(1 - var(--space-y-reverse)))',
         },
+        '.-space-y-2 > :not(template) ~ :not(template)': {
+          '--space-y-reverse': '0',
+          'margin-top': 'calc(-2px * calc(1 - var(--space-y-reverse)))',
+          'margin-bottom': 'calc(-2px * var(--space-y-reverse))',
+        },
+        '.-space-x-2 > :not(template) ~ :not(template)': {
+          '--space-x-reverse': '0',
+          'margin-right': 'calc(-2px * var(--space-y-reverse))',
+          'margin-left': 'calc(-2px * calc(1 - var(--space-y-reverse)))',
+        },
+        '.-space-y-1 > :not(template) ~ :not(template)': {
+          '--space-y-reverse': '0',
+          'margin-top': 'calc(-1px * calc(1 - var(--space-y-reverse)))',
+          'margin-bottom': 'calc(-1px * var(--space-y-reverse))',
+        },
+        '.-space-x-1 > :not(template) ~ :not(template)': {
+          '--space-x-reverse': '0',
+          'margin-right': 'calc(-1px * var(--space-y-reverse))',
+          'margin-left': 'calc(-1px * calc(1 - var(--space-y-reverse)))',
+        },
         '.space-y-reverse > :not(template) ~ :not(template)': {
           '--space-y-reverse': '1',
         },
diff --git a/src/plugins/space.js b/src/plugins/space.js
index a9d0c02f5..660d06a05 100644
--- a/src/plugins/space.js
+++ b/src/plugins/space.js
@@ -1,15 +1,16 @@
 import _ from 'lodash'
+import prefixNegativeModifiers from '../util/prefixNegativeModifiers'
 
 export default function() {
   return function({ addUtilities, e, theme, variants }) {
     const generators = [
       (size, modifier) => ({
-        [`.${e(`space-y-${modifier}`)} > :not(template) ~ :not(template)`]: {
+        [`.${e(prefixNegativeModifiers('space-y', modifier))} > :not(template) ~ :not(template)`]: {
           '--space-y-reverse': '0',
           'margin-top': `calc(${size} * calc(1 - var(--space-y-reverse)))`,
           'margin-bottom': `calc(${size} * var(--space-y-reverse))`,
         },
-        [`.${e(`space-x-${modifier}`)} > :not(template) ~ :not(template)`]: {
+        [`.${e(prefixNegativeModifiers('space-x', modifier))} > :not(template) ~ :not(template)`]: {
           '--space-x-reverse': '0',
           'margin-right': `calc(${size} * var(--space-y-reverse))`,
           'margin-left': `calc(${size} * calc(1 - var(--space-y-reverse)))`,
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index acdbe7c4c..ebff57905 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -376,7 +376,10 @@ module.exports = {
     },
     padding: theme => theme('spacing'),
     placeholderColor: theme => theme('colors'),
-    space: theme => theme('spacing'),
+    space: (theme, { negative }) => ({
+      ...theme('spacing'),
+      ...negative(theme('spacing')),
+    }),
     stroke: {
       current: 'currentColor',
     },