Repository: tailwindlabs/tailwindcss (TypeScript)

Issue:
Border Spacing
Hey,

I just wanted to ask if something related to "border-spacing" is planed?

The default table layout does include `border-spacing: 2px` which is kind of annoying since I wanted to add a bottom border after the table head.

With border-spacing 2:
![bildschirmfoto 2018-02-09 um 23 37 21](https://user-images.githubusercontent.com/15618191/36053507-34513eb6-0df2-11e8-9f3a-3c17e96d8c89.png)

With border-spacing 0:
![bildschirmfoto 2018-02-09 um 23 37 51](https://user-images.githubusercontent.com/15618191/36053530-46238176-0df2-11e8-8101-390743bca782.png)

See also: https://www.w3schools.com/cssref/pr_border-spacing.asp

Have a nice day,
Jordan


Hints:
+1

Default Border Spacing is a problem.
You cannot add a continuous background color to tables because of this.

See http://jsbin.com/soxeqat/edit?html,output 
We're planning to add some table related utilities in the near future but in the mean time you can easily add your own utilities:

https://tailwindcss.com/docs/adding-new-utilities
Looking at getting some of this stuff added soon but quick question, do you actually want `border-spacing: 0` or do you just need `border-collapse: collapse`? It would be nice to avoid adding another scale to the config file for border spacing if people really just care about removing border spacing altogether.
For the continuous background color problem, `border-collapse: collapse` would be enough of a solution. See: http://jsbin.com/culebiluca/2
@adamwathan Yeah `border-collapse: collapse` should be enough. I didn't knew about this css "command".
We have border collapse utilities now as of v0.6.0 👍 
There is an edge case where `border-collapse` does not work: it does not allow you to apply a continuous _rounded_ border to a table element.

- One option as detailed in [this Stack Overflow](https://stackoverflow.com/questions/628301/css3s-border-radius-property-and-border-collapsecollapse-dont-mix-how-can-i) is to use `border-collapse` and apply styles to the last and first `td` child of the last and first `tr` children.
- The other options is to apply `border-spacing: 0;` and use `border-separate`.

**Are there any plans to add support for changing `border-spacing` to tailwind?**
I have a table, with:

-  a right border of the first column
-  and a border of the table head (first row or th tag)

These borders are supposed to be sticky when scrolling on the x- and y-axis. This case just works with `border-separate` but here the default is `border-spacing: 2px`. For a cleaner look I would need a `border-spacing: 0px`...

So, any progress regarding the question above? **"Are there any plans to add support for changing border-spacing"**
Seem like adding your own utility is your best bet for now. With JIT enabled, it'll be nice to see this added to the core library
@adamwathan 
 
```
@layer utilities {
  .border-spacing-0 {
    border-spacing: 0;
  }
}
```
I'm also in need of this. I think this should be included in Tailwind's stock utilities. 

Patch:
diff --git a/src/corePlugins.js b/src/corePlugins.js
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -529,6 +529,41 @@ export let corePlugins = {
     })
   },
 
+  borderSpacing: ({ addDefaults, matchUtilities, theme }) => {
+    addDefaults('border-spacing', {
+      '--tw-border-spacing-x': 0,
+      '--tw-border-spacing-y': 0,
+    })
+
+    matchUtilities(
+      {
+        'border-spacing': (value) => {
+          return {
+            '--tw-border-spacing-x': value,
+            '--tw-border-spacing-y': value,
+            '@defaults border-spacing': {},
+            'border-spacing': 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)',
+          }
+        },
+        'border-spacing-x': (value) => {
+          return {
+            '--tw-border-spacing-x': value,
+            '@defaults border-spacing': {},
+            'border-spacing': 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)',
+          }
+        },
+        'border-spacing-y': (value) => {
+          return {
+            '--tw-border-spacing-y': value,
+            '@defaults border-spacing': {},
+            'border-spacing': 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)',
+          }
+        },
+      },
+      { values: theme('borderSpacing') }
+    )
+  },
+
   transformOrigin: createUtilityPlugin('transformOrigin', [['origin', ['transformOrigin']]]),
   translate: createUtilityPlugin(
     'translate',
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -194,6 +194,9 @@ module.exports = {
       '3xl': '1.5rem',
       full: '9999px',
     },
+    borderSpacing: ({ theme }) => ({
+      ...theme('spacing'),
+    }),
     borderWidth: {
       DEFAULT: '1px',
       0: '0px',


Test patch:
diff --git a/tests/__snapshots__/source-maps.test.js.snap b/tests/__snapshots__/source-maps.test.js.snap
new file mode 100644
--- /dev/null
+++ b/tests/__snapshots__/source-maps.test.js.snap
@@ -0,0 +1,317 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`apply generates source maps 1`] = `
+Array [
+  "2:4 -> 2:4",
+  "3:6-27 -> 3:6-27",
+  "4:6-33 -> 4:6-18",
+  "4:6-33 -> 5:6-17",
+  "4:6-33 -> 6:6-24",
+  "4:6-33 -> 7:6-61",
+  "5:4 -> 8:4",
+  "7:4 -> 10:4",
+  "8:6-39 -> 11:6-39",
+  "9:6-31 -> 12:6-18",
+  "9:6-31 -> 13:6-17",
+  "9:6-31 -> 14:6-24",
+  "9:6-31 -> 15:6-61",
+  "10:4 -> 16:4",
+  "13:6 -> 18:4",
+  "13:6-29 -> 19:6-18",
+  "13:6-29 -> 20:6-17",
+  "13:6-29 -> 21:6-24",
+  "13:6 -> 22:6",
+  "13:29 -> 23:0",
+]
+`;
+
+exports[`components have source maps 1`] = `
+Array [
+  "2:4 -> 1:0",
+  "2:4 -> 2:4",
+  "2:24 -> 3:0",
+  "2:4 -> 4:0",
+  "2:4 -> 5:4",
+  "2:4 -> 6:8",
+  "2:24 -> 7:4",
+  "2:24 -> 8:0",
+  "2:4 -> 9:0",
+  "2:4 -> 10:4",
+  "2:4 -> 11:8",
+  "2:24 -> 12:4",
+  "2:24 -> 13:0",
+  "2:4 -> 14:0",
+  "2:4 -> 15:4",
+  "2:4 -> 16:8",
+  "2:24 -> 17:4",
+  "2:24 -> 18:0",
+  "2:4 -> 19:0",
+  "2:4 -> 20:4",
+  "2:4 -> 21:8",
+  "2:24 -> 22:4",
+  "2:24 -> 23:0",
+  "2:4 -> 24:0",
+  "2:4 -> 25:4",
+  "2:4 -> 26:8",
+  "2:24 -> 27:4",
+  "2:24 -> 28:0",
+]
+`;
+
+exports[`preflight + base have source maps 1`] = `
+Array [
+  "2:4 -> 1:0",
+  "2:18-4 -> 3:1-2",
+  "2:18 -> 6:1",
+  "2:4 -> 8:0",
+  "2:4-18 -> 11:2-32",
+  "2:4-18 -> 12:2-25",
+  "2:4-18 -> 13:2-29",
+  "2:4-18 -> 14:2-31",
+  "2:18 -> 15:0",
+  "2:4 -> 17:0",
+  "2:4-18 -> 19:2-18",
+  "2:18 -> 20:0",
+  "2:4 -> 22:0",
+  "2:18 -> 27:1",
+  "2:4 -> 29:0",
+  "2:4-18 -> 30:2-26",
+  "2:4-18 -> 31:2-40",
+  "2:4-18 -> 32:2-26",
+  "2:4-18 -> 33:2-21",
+  "2:4-18 -> 34:2-230",
+  "2:18 -> 35:0",
+  "2:4 -> 37:0",
+  "2:18 -> 40:1",
+  "2:4 -> 42:0",
+  "2:4-18 -> 43:2-19",
+  "2:4-18 -> 44:2-30",
+  "2:18 -> 45:0",
+  "2:4 -> 47:0",
+  "2:18 -> 51:1",
+  "2:4 -> 53:0",
+  "2:4-18 -> 54:2-19",
+  "2:4-18 -> 55:2-24",
+  "2:4-18 -> 56:2-31",
+  "2:18 -> 57:0",
+  "2:4 -> 59:0",
+  "2:18 -> 61:1",
+  "2:4 -> 63:0",
+  "2:4-18 -> 64:2-35",
+  "2:18 -> 65:0",
+  "2:4 -> 67:0",
+  "2:18 -> 69:1",
+  "2:4 -> 71:0",
+  "2:4-18 -> 77:2-20",
+  "2:4-18 -> 78:2-22",
+  "2:18 -> 79:0",
+  "2:4 -> 81:0",
+  "2:18 -> 83:1",
+  "2:4 -> 85:0",
+  "2:4-18 -> 86:2-16",
+  "2:4-18 -> 87:2-26",
+  "2:18 -> 88:0",
+  "2:4 -> 90:0",
+  "2:18 -> 92:1",
+  "2:4 -> 94:0",
+  "2:4-18 -> 96:2-21",
+  "2:18 -> 97:0",
+  "2:4 -> 99:0",
+  "2:18 -> 102:1",
+  "2:4 -> 104:0",
+  "2:4-18 -> 108:2-121",
+  "2:4-18 -> 109:2-24",
+  "2:18 -> 110:0",
+  "2:4 -> 112:0",
+  "2:18 -> 114:1",
+  "2:4 -> 116:0",
+  "2:4-18 -> 117:2-16",
+  "2:18 -> 118:0",
+  "2:4 -> 120:0",
+  "2:18 -> 122:1",
+  "2:4 -> 124:0",
+  "2:4-18 -> 126:2-16",
+  "2:4-18 -> 127:2-16",
+  "2:4-18 -> 128:2-20",
+  "2:4-18 -> 129:2-26",
+  "2:18 -> 130:0",
+  "2:4 -> 132:0",
+  "2:4-18 -> 133:2-17",
+  "2:18 -> 134:0",
+  "2:4 -> 136:0",
+  "2:4-18 -> 137:2-13",
+  "2:18 -> 138:0",
+  "2:4 -> 140:0",
+  "2:18 -> 144:1",
+  "2:4 -> 146:0",
+  "2:4-18 -> 147:2-24",
+  "2:4-18 -> 148:2-31",
+  "2:4-18 -> 149:2-35",
+  "2:18 -> 150:0",
+  "2:4 -> 152:0",
+  "2:18 -> 156:1",
+  "2:4 -> 158:0",
+  "2:4-18 -> 163:2-30",
+  "2:4-18 -> 164:2-25",
+  "2:4-18 -> 165:2-30",
+  "2:4-18 -> 166:2-24",
+  "2:4-18 -> 167:2-19",
+  "2:4-18 -> 168:2-20",
+  "2:18 -> 169:0",
+  "2:4 -> 171:0",
+  "2:18 -> 173:1",
+  "2:4 -> 175:0",
+  "2:4-18 -> 177:2-22",
+  "2:18 -> 178:0",
+  "2:4 -> 180:0",
+  "2:18 -> 183:1",
+  "2:4 -> 185:0",
+  "2:4-18 -> 189:2-36",
+  "2:4-18 -> 190:2-39",
+  "2:4-18 -> 191:2-32",
+  "2:18 -> 192:0",
+  "2:4 -> 194:0",
+  "2:18 -> 196:1",
+  "2:4 -> 198:0",
+  "2:4-18 -> 199:2-15",
+  "2:18 -> 200:0",
+  "2:4 -> 202:0",
+  "2:18 -> 204:1",
+  "2:4 -> 206:0",
+  "2:4-18 -> 207:2-18",
+  "2:18 -> 208:0",
+  "2:4 -> 210:0",
+  "2:18 -> 212:1",
+  "2:4 -> 214:0",
+  "2:4-18 -> 215:2-26",
+  "2:18 -> 216:0",
+  "2:4 -> 218:0",
+  "2:18 -> 220:1",
+  "2:4 -> 222:0",
+  "2:4-18 -> 224:2-14",
+  "2:18 -> 225:0",
+  "2:4 -> 227:0",
+  "2:18 -> 230:1",
+  "2:4 -> 232:0",
+  "2:4-18 -> 233:2-39",
+  "2:4-18 -> 234:2-30",
+  "2:18 -> 235:0",
+  "2:4 -> 237:0",
+  "2:18 -> 239:1",
+  "2:4 -> 241:0",
+  "2:4-18 -> 242:2-26",
+  "2:18 -> 243:0",
+  "2:4 -> 245:0",
+  "2:18 -> 248:1",
+  "2:4 -> 250:0",
+  "2:4-18 -> 251:2-36",
+  "2:4-18 -> 252:2-23",
+  "2:18 -> 253:0",
+  "2:4 -> 255:0",
+  "2:18 -> 257:1",
+  "2:4 -> 259:0",
+  "2:4-18 -> 260:2-20",
+  "2:18 -> 261:0",
+  "2:4 -> 263:0",
+  "2:18 -> 265:1",
+  "2:4 -> 267:0",
+  "2:4-18 -> 280:2-11",
+  "2:18 -> 281:0",
+  "2:4 -> 283:0",
+  "2:4-18 -> 284:2-11",
+  "2:4-18 -> 285:2-12",
+  "2:18 -> 286:0",
+  "2:4 -> 288:0",
+  "2:4-18 -> 289:2-12",
+  "2:18 -> 290:0",
+  "2:4 -> 292:0",
+  "2:4-18 -> 295:2-18",
+  "2:4-18 -> 296:2-11",
+  "2:4-18 -> 297:2-12",
+  "2:18 -> 298:0",
+  "2:4 -> 300:0",
+  "2:18 -> 302:1",
+  "2:4 -> 304:0",
+  "2:4-18 -> 305:2-18",
+  "2:18 -> 306:0",
+  "2:4 -> 308:0",
+  "2:18 -> 311:1",
+  "2:4 -> 313:0",
+  "2:4-18 -> 315:2-20",
+  "2:4-18 -> 316:2-24",
+  "2:18 -> 317:0",
+  "2:4 -> 319:0",
+  "2:18 -> 321:1",
+  "2:4 -> 323:0",
+  "2:4-18 -> 325:2-17",
+  "2:18 -> 326:0",
+  "2:4 -> 328:0",
+  "2:18 -> 330:1",
+  "2:4 -> 331:0",
+  "2:4-18 -> 332:2-17",
+  "2:18 -> 333:0",
+  "2:4 -> 335:0",
+  "2:18 -> 339:1",
+  "2:4 -> 341:0",
+  "2:4-18 -> 349:2-24",
+  "2:4-18 -> 350:2-32",
+  "2:18 -> 351:0",
+  "2:4 -> 353:0",
+  "2:18 -> 355:1",
+  "2:4 -> 357:0",
+  "2:4-18 -> 359:2-17",
+  "2:4-18 -> 360:2-14",
+  "2:18 -> 361:0",
+  "2:4 -> 363:0",
+  "2:18 -> 365:1",
+  "2:4 -> 367:0",
+  "2:4-18 -> 368:2-15",
+  "2:18 -> 369:0",
+  "2:4 -> 371:0",
+  "2:4-18 -> 372:2-26",
+  "2:4-18 -> 373:2-26",
+  "2:4-18 -> 374:2-21",
+  "2:4-18 -> 375:2-21",
+  "2:4-18 -> 376:2-16",
+  "2:4-18 -> 377:2-16",
+  "2:4-18 -> 378:2-16",
+  "2:4-18 -> 379:2-17",
+  "2:4-18 -> 380:2-17",
+  "2:4-18 -> 381:2-15",
+  "2:4-18 -> 382:2-15",
+  "2:4-18 -> 383:2-20",
+  "2:4-18 -> 384:2-40",
+  "2:4-18 -> 385:2-17",
+  "2:4-18 -> 386:2-22",
+  "2:4-18 -> 387:2-24",
+  "2:4-18 -> 388:2-25",
+  "2:4-18 -> 389:2-26",
+  "2:4-18 -> 390:2-20",
+  "2:4-18 -> 391:2-29",
+  "2:4-18 -> 392:2-30",
+  "2:4-18 -> 393:2-40",
+  "2:4-18 -> 394:2-36",
+  "2:4-18 -> 395:2-29",
+  "2:4-18 -> 396:2-24",
+  "2:4-18 -> 397:2-32",
+  "2:4-18 -> 398:2-14",
+  "2:4-18 -> 399:2-20",
+  "2:4-18 -> 400:2-18",
+  "2:4-18 -> 401:2-19",
+  "2:4-18 -> 402:2-20",
+  "2:4-18 -> 403:2-16",
+  "2:4-18 -> 404:2-18",
+  "2:4-18 -> 405:2-15",
+  "2:4-18 -> 406:2-21",
+  "2:4-18 -> 407:2-23",
+  "2:4-18 -> 408:2-29",
+  "2:4-18 -> 409:2-27",
+  "2:4-18 -> 410:2-28",
+  "2:4-18 -> 411:2-29",
+  "2:4-18 -> 412:2-25",
+  "2:4-18 -> 413:2-26",
+  "2:4-18 -> 414:2-27",
+  "2:4 -> 415:2",
+  "2:18 -> 416:0",
+]
+`;
diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css
--- a/tests/basic-usage.test.css
+++ b/tests/basic-usage.test.css
@@ -1,6 +1,8 @@
 *,
 ::before,
 ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
   --tw-translate-y: 0;
   --tw-rotate: 0;
@@ -252,6 +254,19 @@
 .border-collapse {
   border-collapse: collapse;
 }
+.border-spacing-4 {
+  --tw-border-spacing-x: 1rem;
+  --tw-border-spacing-y: 1rem;
+  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+}
+.border-spacing-x-6 {
+  --tw-border-spacing-x: 1.5rem;
+  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+}
+.border-spacing-y-8 {
+  --tw-border-spacing-y: 2rem;
+  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+}
 .origin-top-right {
   transform-origin: top right;
 }
diff --git a/tests/basic-usage.test.html b/tests/basic-usage.test.html
--- a/tests/basic-usage.test.html
+++ b/tests/basic-usage.test.html
@@ -25,6 +25,7 @@
     <div class="bg-cover"></div>
     <div class="bg-origin-border bg-origin-padding bg-origin-content"></div>
     <div class="border-collapse"></div>
+    <div class="border-spacing-4 border-spacing-x-6 border-spacing-y-8"></div>
     <div class="border-black border-t-black border-r-black border-b-black border-l-black border-x-black border-y-black"></div>
     <div class="border-opacity-10"></div>
     <div class="rounded-md"></div>
diff --git a/tests/basic-usage.test.js b/tests/basic-usage.test.js
--- a/tests/basic-usage.test.js
+++ b/tests/basic-usage.test.js
@@ -152,6 +152,8 @@ test('default ring color can be a function', () => {
       *,
       ::before,
       ::after {
+        --tw-border-spacing-x: 0;
+        --tw-border-spacing-y: 0;
         --tw-translate-x: 0;
         --tw-translate-y: 0;
         --tw-rotate: 0;
diff --git a/tests/collapse-adjacent-rules.test.css b/tests/collapse-adjacent-rules.test.css
--- a/tests/collapse-adjacent-rules.test.css
+++ b/tests/collapse-adjacent-rules.test.css
@@ -10,6 +10,8 @@
 *,
 ::before,
 ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
   --tw-translate-y: 0;
   --tw-rotate: 0;
diff --git a/tests/import-syntax.test.css b/tests/import-syntax.test.css
--- a/tests/import-syntax.test.css
+++ b/tests/import-syntax.test.css
@@ -4,6 +4,8 @@ h1 {
 *,
 ::before,
 ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
   --tw-translate-y: 0;
   --tw-rotate: 0;
diff --git a/tests/important-boolean.test.css b/tests/important-boolean.test.css
--- a/tests/important-boolean.test.css
+++ b/tests/important-boolean.test.css
@@ -1,6 +1,8 @@
 *,
 ::before,
 ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
   --tw-translate-y: 0;
   --tw-rotate: 0;
diff --git a/tests/important-modifier-prefix.test.css b/tests/important-modifier-prefix.test.css
--- a/tests/important-modifier-prefix.test.css
+++ b/tests/important-modifier-prefix.test.css
@@ -1,6 +1,8 @@
 *,
 ::before,
 ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
   --tw-translate-y: 0;
   --tw-rotate: 0;
diff --git a/tests/important-selector.test.css b/tests/important-selector.test.css
--- a/tests/important-selector.test.css
+++ b/tests/important-selector.test.css
@@ -1,6 +1,8 @@
 *,
 ::before,
 ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
   --tw-translate-y: 0;
   --tw-rotate: 0;
diff --git a/tests/kitchen-sink.test.css b/tests/kitchen-sink.test.css
--- a/tests/kitchen-sink.test.css
+++ b/tests/kitchen-sink.test.css
@@ -139,6 +139,8 @@ div {
 *,
 ::before,
 ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
   --tw-translate-y: 0;
   --tw-rotate: 0;
diff --git a/tests/plugins/divide.test.js b/tests/plugins/divide.test.js
--- a/tests/plugins/divide.test.js
+++ b/tests/plugins/divide.test.js
@@ -11,6 +11,8 @@ it('should add the divide styles for divide-y and a default border color', () =>
       *,
       ::before,
       ::after {
+        --tw-border-spacing-x: 0;
+        --tw-border-spacing-y: 0;
         --tw-translate-x: 0;
         --tw-translate-y: 0;
         --tw-rotate: 0;
@@ -75,6 +77,8 @@ it('should add the divide styles for divide-x and a default border color', () =>
       *,
       ::before,
       ::after {
+        --tw-border-spacing-x: 0;
+        --tw-border-spacing-y: 0;
         --tw-translate-x: 0;
         --tw-translate-y: 0;
         --tw-rotate: 0;
@@ -139,6 +143,8 @@ it('should add the divide styles for divide-y-reverse and a default border color
       *,
       ::before,
       ::after {
+        --tw-border-spacing-x: 0;
+        --tw-border-spacing-y: 0;
         --tw-translate-x: 0;
         --tw-translate-y: 0;
         --tw-rotate: 0;
@@ -201,6 +207,8 @@ it('should add the divide styles for divide-x-reverse and a default border color
       *,
       ::before,
       ::after {
+        --tw-border-spacing-x: 0;
+        --tw-border-spacing-y: 0;
         --tw-translate-x: 0;
         --tw-translate-y: 0;
         --tw-rotate: 0;
@@ -263,6 +271,8 @@ it('should only inject the base styles once if we use divide and border at the s
       *,
       ::before,
       ::after {
+        --tw-border-spacing-x: 0;
+        --tw-border-spacing-y: 0;
         --tw-translate-x: 0;
         --tw-translate-y: 0;
         --tw-rotate: 0;
diff --git a/tests/prefix.test.css b/tests/prefix.test.css
--- a/tests/prefix.test.css
+++ b/tests/prefix.test.css
@@ -1,6 +1,8 @@
 *,
 ::before,
 ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
   --tw-translate-y: 0;
   --tw-rotate: 0;
diff --git a/tests/source-maps.test.js b/tests/source-maps.test.js
--- a/tests/source-maps.test.js
+++ b/tests/source-maps.test.js
@@ -40,28 +40,7 @@ it('apply generates source maps', async () => {
   expect(sources.length).toBe(1)
 
   // It would make the tests nicer to read and write
-  expect(annotations).toStrictEqual([
-    '2:4 -> 2:4',
-    '3:6-27 -> 3:6-27',
-    '4:6-33 -> 4:6-18',
-    '4:6-33 -> 5:6-17',
-    '4:6-33 -> 6:6-24',
-    '4:6-33 -> 7:6-61',
-    '5:4 -> 8:4',
-    '7:4 -> 10:4',
-    '8:6-39 -> 11:6-39',
-    '9:6-31 -> 12:6-18',
-    '9:6-31 -> 13:6-17',
-    '9:6-31 -> 14:6-24',
-    '9:6-31 -> 15:6-61',
-    '10:4 -> 16:4',
-    '13:6 -> 18:4',
-    '13:6-29 -> 19:6-18',
-    '13:6-29 -> 20:6-17',
-    '13:6-29 -> 21:6-24',
-    '13:6 -> 22:6',
-    '13:29 -> 23:0',
-  ])
+  expect(annotations).toMatchSnapshot()
 })
 
 it('preflight + base have source maps', async () => {
@@ -82,259 +61,7 @@ it('preflight + base have source maps', async () => {
   expect(sources.length).toBe(1)
 
   // It would make the tests nicer to read and write
-  expect(annotations).toStrictEqual([
-    '2:4 -> 1:0',
-    '2:18-4 -> 3:1-2',
-    '2:18 -> 6:1',
-    '2:4 -> 8:0',
-    '2:4-18 -> 11:2-32',
-    '2:4-18 -> 12:2-25',
-    '2:4-18 -> 13:2-29',
-    '2:4-18 -> 14:2-31',
-    '2:18 -> 15:0',
-    '2:4 -> 17:0',
-    '2:4-18 -> 19:2-18',
-    '2:18 -> 20:0',
-    '2:4 -> 22:0',
-    '2:18 -> 27:1',
-    '2:4 -> 29:0',
-    '2:4-18 -> 30:2-26',
-    '2:4-18 -> 31:2-40',
-    '2:4-18 -> 32:2-26',
-    '2:4-18 -> 33:2-21',
-    '2:4-18 -> 34:2-230',
-    '2:18 -> 35:0',
-    '2:4 -> 37:0',
-    '2:18 -> 40:1',
-    '2:4 -> 42:0',
-    '2:4-18 -> 43:2-19',
-    '2:4-18 -> 44:2-30',
-    '2:18 -> 45:0',
-    '2:4 -> 47:0',
-    '2:18 -> 51:1',
-    '2:4 -> 53:0',
-    '2:4-18 -> 54:2-19',
-    '2:4-18 -> 55:2-24',
-    '2:4-18 -> 56:2-31',
-    '2:18 -> 57:0',
-    '2:4 -> 59:0',
-    '2:18 -> 61:1',
-    '2:4 -> 63:0',
-    '2:4-18 -> 64:2-35',
-    '2:18 -> 65:0',
-    '2:4 -> 67:0',
-    '2:18 -> 69:1',
-    '2:4 -> 71:0',
-    '2:4-18 -> 77:2-20',
-    '2:4-18 -> 78:2-22',
-    '2:18 -> 79:0',
-    '2:4 -> 81:0',
-    '2:18 -> 83:1',
-    '2:4 -> 85:0',
-    '2:4-18 -> 86:2-16',
-    '2:4-18 -> 87:2-26',
-    '2:18 -> 88:0',
-    '2:4 -> 90:0',
-    '2:18 -> 92:1',
-    '2:4 -> 94:0',
-    '2:4-18 -> 96:2-21',
-    '2:18 -> 97:0',
-    '2:4 -> 99:0',
-    '2:18 -> 102:1',
-    '2:4 -> 104:0',
-    '2:4-18 -> 108:2-121',
-    '2:4-18 -> 109:2-24',
-    '2:18 -> 110:0',
-    '2:4 -> 112:0',
-    '2:18 -> 114:1',
-    '2:4 -> 116:0',
-    '2:4-18 -> 117:2-16',
-    '2:18 -> 118:0',
-    '2:4 -> 120:0',
-    '2:18 -> 122:1',
-    '2:4 -> 124:0',
-    '2:4-18 -> 126:2-16',
-    '2:4-18 -> 127:2-16',
-    '2:4-18 -> 128:2-20',
-    '2:4-18 -> 129:2-26',
-    '2:18 -> 130:0',
-    '2:4 -> 132:0',
-    '2:4-18 -> 133:2-17',
-    '2:18 -> 134:0',
-    '2:4 -> 136:0',
-    '2:4-18 -> 137:2-13',
-    '2:18 -> 138:0',
-    '2:4 -> 140:0',
-    '2:18 -> 144:1',
-    '2:4 -> 146:0',
-    '2:4-18 -> 147:2-24',
-    '2:4-18 -> 148:2-31',
-    '2:4-18 -> 149:2-35',
-    '2:18 -> 150:0',
-    '2:4 -> 152:0',
-    '2:18 -> 156:1',
-    '2:4 -> 158:0',
-    '2:4-18 -> 163:2-30',
-    '2:4-18 -> 164:2-25',
-    '2:4-18 -> 165:2-30',
-    '2:4-18 -> 166:2-24',
-    '2:4-18 -> 167:2-19',
-    '2:4-18 -> 168:2-20',
-    '2:18 -> 169:0',
-    '2:4 -> 171:0',
-    '2:18 -> 173:1',
-    '2:4 -> 175:0',
-    '2:4-18 -> 177:2-22',
-    '2:18 -> 178:0',
-    '2:4 -> 180:0',
-    '2:18 -> 183:1',
-    '2:4 -> 185:0',
-    '2:4-18 -> 189:2-36',
-    '2:4-18 -> 190:2-39',
-    '2:4-18 -> 191:2-32',
-    '2:18 -> 192:0',
-    '2:4 -> 194:0',
-    '2:18 -> 196:1',
-    '2:4 -> 198:0',
-    '2:4-18 -> 199:2-15',
-    '2:18 -> 200:0',
-    '2:4 -> 202:0',
-    '2:18 -> 204:1',
-    '2:4 -> 206:0',
-    '2:4-18 -> 207:2-18',
-    '2:18 -> 208:0',
-    '2:4 -> 210:0',
-    '2:18 -> 212:1',
-    '2:4 -> 214:0',
-    '2:4-18 -> 215:2-26',
-    '2:18 -> 216:0',
-    '2:4 -> 218:0',
-    '2:18 -> 220:1',
-    '2:4 -> 222:0',
-    '2:4-18 -> 224:2-14',
-    '2:18 -> 225:0',
-    '2:4 -> 227:0',
-    '2:18 -> 230:1',
-    '2:4 -> 232:0',
-    '2:4-18 -> 233:2-39',
-    '2:4-18 -> 234:2-30',
-    '2:18 -> 235:0',
-    '2:4 -> 237:0',
-    '2:18 -> 239:1',
-    '2:4 -> 241:0',
-    '2:4-18 -> 242:2-26',
-    '2:18 -> 243:0',
-    '2:4 -> 245:0',
-    '2:18 -> 248:1',
-    '2:4 -> 250:0',
-    '2:4-18 -> 251:2-36',
-    '2:4-18 -> 252:2-23',
-    '2:18 -> 253:0',
-    '2:4 -> 255:0',
-    '2:18 -> 257:1',
-    '2:4 -> 259:0',
-    '2:4-18 -> 260:2-20',
-    '2:18 -> 261:0',
-    '2:4 -> 263:0',
-    '2:18 -> 265:1',
-    '2:4 -> 267:0',
-    '2:4-18 -> 280:2-11',
-    '2:18 -> 281:0',
-    '2:4 -> 283:0',
-    '2:4-18 -> 284:2-11',
-    '2:4-18 -> 285:2-12',
-    '2:18 -> 286:0',
-    '2:4 -> 288:0',
-    '2:4-18 -> 289:2-12',
-    '2:18 -> 290:0',
-    '2:4 -> 292:0',
-    '2:4-18 -> 295:2-18',
-    '2:4-18 -> 296:2-11',
-    '2:4-18 -> 297:2-12',
-    '2:18 -> 298:0',
-    '2:4 -> 300:0',
-    '2:18 -> 302:1',
-    '2:4 -> 304:0',
-    '2:4-18 -> 305:2-18',
-    '2:18 -> 306:0',
-    '2:4 -> 308:0',
-    '2:18 -> 311:1',
-    '2:4 -> 313:0',
-    '2:4-18 -> 315:2-20',
-    '2:4-18 -> 316:2-24',
-    '2:18 -> 317:0',
-    '2:4 -> 319:0',
-    '2:18 -> 321:1',
-    '2:4 -> 323:0',
-    '2:4-18 -> 325:2-17',
-    '2:18 -> 326:0',
-    '2:4 -> 328:0',
-    '2:18 -> 330:1',
-    '2:4 -> 331:0',
-    '2:4-18 -> 332:2-17',
-    '2:18 -> 333:0',
-    '2:4 -> 335:0',
-    '2:18 -> 339:1',
-    '2:4 -> 341:0',
-    '2:4-18 -> 349:2-24',
-    '2:4-18 -> 350:2-32',
-    '2:18 -> 351:0',
-    '2:4 -> 353:0',
-    '2:18 -> 355:1',
-    '2:4 -> 357:0',
-    '2:4-18 -> 359:2-17',
-    '2:4-18 -> 360:2-14',
-    '2:18 -> 361:0',
-    '2:4 -> 363:0',
-    '2:18 -> 365:1',
-    '2:4 -> 367:0',
-    '2:4-18 -> 368:2-15',
-    '2:18 -> 369:0',
-    '2:4 -> 371:0',
-    '2:4-18 -> 372:2-21',
-    '2:4-18 -> 373:2-21',
-    '2:4-18 -> 374:2-16',
-    '2:4-18 -> 375:2-16',
-    '2:4-18 -> 376:2-16',
-    '2:4-18 -> 377:2-17',
-    '2:4-18 -> 378:2-17',
-    '2:4-18 -> 379:2-15',
-    '2:4-18 -> 380:2-15',
-    '2:4-18 -> 381:2-20',
-    '2:4-18 -> 382:2-40',
-    '2:4-18 -> 383:2-17',
-    '2:4-18 -> 384:2-22',
-    '2:4-18 -> 385:2-24',
-    '2:4-18 -> 386:2-25',
-    '2:4-18 -> 387:2-26',
-    '2:4-18 -> 388:2-20',
-    '2:4-18 -> 389:2-29',
-    '2:4-18 -> 390:2-30',
-    '2:4-18 -> 391:2-40',
-    '2:4-18 -> 392:2-36',
-    '2:4-18 -> 393:2-29',
-    '2:4-18 -> 394:2-24',
-    '2:4-18 -> 395:2-32',
-    '2:4-18 -> 396:2-14',
-    '2:4-18 -> 397:2-20',
-    '2:4-18 -> 398:2-18',
-    '2:4-18 -> 399:2-19',
-    '2:4-18 -> 400:2-20',
-    '2:4-18 -> 401:2-16',
-    '2:4-18 -> 402:2-18',
-    '2:4-18 -> 403:2-15',
-    '2:4-18 -> 404:2-21',
-    '2:4-18 -> 405:2-23',
-    '2:4-18 -> 406:2-29',
-    '2:4-18 -> 407:2-27',
-    '2:4-18 -> 408:2-28',
-    '2:4-18 -> 409:2-29',
-    '2:4-18 -> 410:2-25',
-    '2:4-18 -> 411:2-26',
-    '2:4-18 -> 412:2-27',
-    '2:4 -> 413:2',
-    '2:18 -> 414:0',
-  ])
+  expect(annotations).toMatchSnapshot()
 })
 
 it('utilities have source maps', async () => {
@@ -376,34 +103,5 @@ it('components have source maps', async () => {
   expect(sources.length).toBe(1)
 
   // It would make the tests nicer to read and write
-  expect(annotations).toStrictEqual([
-    '2:4 -> 1:0',
-    '2:4 -> 2:4',
-    '2:24 -> 3:0',
-    '2:4 -> 4:0',
-    '2:4 -> 5:4',
-    '2:4 -> 6:8',
-    '2:24 -> 7:4',
-    '2:24 -> 8:0',
-    '2:4 -> 9:0',
-    '2:4 -> 10:4',
-    '2:4 -> 11:8',
-    '2:24 -> 12:4',
-    '2:24 -> 13:0',
-    '2:4 -> 14:0',
-    '2:4 -> 15:4',
-    '2:4 -> 16:8',
-    '2:24 -> 17:4',
-    '2:24 -> 18:0',
-    '2:4 -> 19:0',
-    '2:4 -> 20:4',
-    '2:4 -> 21:8',
-    '2:24 -> 22:4',
-    '2:24 -> 23:0',
-    '2:4 -> 24:0',
-    '2:4 -> 25:4',
-    '2:4 -> 26:8',
-    '2:24 -> 27:4',
-    '2:24 -> 28:0',
-  ])
+  expect(annotations).toMatchSnapshot()
 })
diff --git a/tests/util/defaults.js b/tests/util/defaults.js
--- a/tests/util/defaults.js
+++ b/tests/util/defaults.js
@@ -10,6 +10,8 @@ export function defaults({ defaultRingColor = `rgb(59 130 246 / 0.5)` } = {}) {
     *,
     ::before,
     ::after {
+      --tw-border-spacing-x: 0;
+      --tw-border-spacing-y: 0;
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-rotate: 0;
diff --git a/tests/variants.test.css b/tests/variants.test.css
--- a/tests/variants.test.css
+++ b/tests/variants.test.css
@@ -1,6 +1,8 @@
 *,
 ::before,
 ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
   --tw-translate-y: 0;
   --tw-rotate: 0;