Repository: tailwindlabs/tailwindcss
Pull request #2198 (2020-08-19 17:29:46)

Add bg-none utility
This PR adds a new `bg-none` utility that sets `background-image: none` so you can responsively disable gradient backgrounds like this:

```html
<div class="bg-gradient-to-r md:bg-none">...</div>
```

Not having this in v1.7.0 was a mistake and I consider this a bugfix (it was impossible to undo the styles) so going to sneak this into a patch release 👀 


Patch:
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index 2bed8316..2d3ddc9d 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -152,6 +152,7 @@ module.exports = {
     },
     backgroundColor: theme => theme('colors'),
     backgroundImage: {
+      none: 'none',
       'gradient-to-t': 'linear-gradient(to top, var(--gradient-color-stops))',
       'gradient-to-tr': 'linear-gradient(to top right, var(--gradient-color-stops))',
       'gradient-to-r': 'linear-gradient(to right, var(--gradient-color-stops))',


Test patch:
diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css
index 000bf97d..0678ba12 100644
--- a/__tests__/fixtures/tailwind-output-flagged.css
+++ b/__tests__/fixtures/tailwind-output-flagged.css
@@ -4803,6 +4803,10 @@ video {
   background-color: rgba(117, 26, 61, var(--bg-opacity));
 }
 
+.bg-none {
+  background-image: none;
+}
+
 .bg-gradient-to-t {
   background-image: linear-gradient(to top, var(--gradient-color-stops));
 }
@@ -34320,6 +34324,10 @@ video {
     background-color: rgba(117, 26, 61, var(--bg-opacity));
   }
 
+  .sm\:bg-none {
+    background-image: none;
+  }
+
   .sm\:bg-gradient-to-t {
     background-image: linear-gradient(to top, var(--gradient-color-stops));
   }
@@ -63807,6 +63815,10 @@ video {
     background-color: rgba(117, 26, 61, var(--bg-opacity));
   }
 
+  .md\:bg-none {
+    background-image: none;
+  }
+
   .md\:bg-gradient-to-t {
     background-image: linear-gradient(to top, var(--gradient-color-stops));
   }
@@ -93294,6 +93306,10 @@ video {
     background-color: rgba(117, 26, 61, var(--bg-opacity));
   }
 
+  .lg\:bg-none {
+    background-image: none;
+  }
+
   .lg\:bg-gradient-to-t {
     background-image: linear-gradient(to top, var(--gradient-color-stops));
   }
@@ -122781,6 +122797,10 @@ video {
     background-color: rgba(117, 26, 61, var(--bg-opacity));
   }
 
+  .xl\:bg-none {
+    background-image: none;
+  }
+
   .xl\:bg-gradient-to-t {
     background-image: linear-gradient(to top, var(--gradient-color-stops));
   }
diff --git a/__tests__/fixtures/tailwind-output-ie11.css b/__tests__/fixtures/tailwind-output-ie11.css
index 972d09c8..8be78a34 100644
--- a/__tests__/fixtures/tailwind-output-ie11.css
+++ b/__tests__/fixtures/tailwind-output-ie11.css
@@ -2539,6 +2539,10 @@ video {
   background-color: #702459;
 }
 
+.bg-none {
+  background-image: none;
+}
+
 .bg-bottom {
   background-position: bottom;
 }
@@ -13001,6 +13005,10 @@ video {
     background-color: #702459;
   }
 
+  .sm\:bg-none {
+    background-image: none;
+  }
+
   .sm\:bg-bottom {
     background-position: bottom;
   }
@@ -23433,6 +23441,10 @@ video {
     background-color: #702459;
   }
 
+  .md\:bg-none {
+    background-image: none;
+  }
+
   .md\:bg-bottom {
     background-position: bottom;
   }
@@ -33865,6 +33877,10 @@ video {
     background-color: #702459;
   }
 
+  .lg\:bg-none {
+    background-image: none;
+  }
+
   .lg\:bg-bottom {
     background-position: bottom;
   }
@@ -44297,6 +44313,10 @@ video {
     background-color: #702459;
   }
 
+  .xl\:bg-none {
+    background-image: none;
+  }
+
   .xl\:bg-bottom {
     background-position: bottom;
   }
diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index e9ed7401..800c031b 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -3483,6 +3483,10 @@ video {
   background-color: rgba(112, 36, 89, var(--bg-opacity)) !important;
 }
 
+.bg-none {
+  background-image: none !important;
+}
+
 .bg-gradient-to-t {
   background-image: linear-gradient(to top, var(--gradient-color-stops)) !important;
 }
@@ -21545,6 +21549,10 @@ video {
     background-color: rgba(112, 36, 89, var(--bg-opacity)) !important;
   }
 
+  .sm\:bg-none {
+    background-image: none !important;
+  }
+
   .sm\:bg-gradient-to-t {
     background-image: linear-gradient(to top, var(--gradient-color-stops)) !important;
   }
@@ -39577,6 +39585,10 @@ video {
     background-color: rgba(112, 36, 89, var(--bg-opacity)) !important;
   }
 
+  .md\:bg-none {
+    background-image: none !important;
+  }
+
   .md\:bg-gradient-to-t {
     background-image: linear-gradient(to top, var(--gradient-color-stops)) !important;
   }
@@ -57609,6 +57621,10 @@ video {
     background-color: rgba(112, 36, 89, var(--bg-opacity)) !important;
   }
 
+  .lg\:bg-none {
+    background-image: none !important;
+  }
+
   .lg\:bg-gradient-to-t {
     background-image: linear-gradient(to top, var(--gradient-color-stops)) !important;
   }
@@ -75641,6 +75657,10 @@ video {
     background-color: rgba(112, 36, 89, var(--bg-opacity)) !important;
   }
 
+  .xl\:bg-none {
+    background-image: none !important;
+  }
+
   .xl\:bg-gradient-to-t {
     background-image: linear-gradient(to top, var(--gradient-color-stops)) !important;
   }
diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css
index ca1ff424..4af6e00d 100644
--- a/__tests__/fixtures/tailwind-output-no-color-opacity.css
+++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css
@@ -2727,6 +2727,10 @@ video {
   background-color: #702459;
 }
 
+.bg-none {
+  background-image: none;
+}
+
 .bg-gradient-to-t {
   background-image: linear-gradient(to top, var(--gradient-color-stops));
 }
@@ -18341,6 +18345,10 @@ video {
     background-color: #702459;
   }
 
+  .sm\:bg-none {
+    background-image: none;
+  }
+
   .sm\:bg-gradient-to-t {
     background-image: linear-gradient(to top, var(--gradient-color-stops));
   }
@@ -33925,6 +33933,10 @@ video {
     background-color: #702459;
   }
 
+  .md\:bg-none {
+    background-image: none;
+  }
+
   .md\:bg-gradient-to-t {
     background-image: linear-gradient(to top, var(--gradient-color-stops));
   }
@@ -49509,6 +49521,10 @@ video {
     background-color: #702459;
   }
 
+  .lg\:bg-none {
+    background-image: none;
+  }
+
   .lg\:bg-gradient-to-t {
     background-image: linear-gradient(to top, var(--gradient-color-stops));
   }
@@ -65093,6 +65109,10 @@ video {
     background-color: #702459;
   }
 
+  .xl\:bg-none {
+    background-image: none;
+  }
+
   .xl\:bg-gradient-to-t {
     background-image: linear-gradient(to top, var(--gradient-color-stops));
   }
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 5ea711a1..a0ecaa73 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -3483,6 +3483,10 @@ video {
   background-color: rgba(112, 36, 89, var(--bg-opacity));
 }
 
+.bg-none {
+  background-image: none;
+}
+
 .bg-gradient-to-t {
   background-image: linear-gradient(to top, var(--gradient-color-stops));
 }
@@ -21545,6 +21549,10 @@ video {
     background-color: rgba(112, 36, 89, var(--bg-opacity));
   }
 
+  .sm\:bg-none {
+    background-image: none;
+  }
+
   .sm\:bg-gradient-to-t {
     background-image: linear-gradient(to top, var(--gradient-color-stops));
   }
@@ -39577,6 +39585,10 @@ video {
     background-color: rgba(112, 36, 89, var(--bg-opacity));
   }
 
+  .md\:bg-none {
+    background-image: none;
+  }
+
   .md\:bg-gradient-to-t {
     background-image: linear-gradient(to top, var(--gradient-color-stops));
   }
@@ -57609,6 +57621,10 @@ video {
     background-color: rgba(112, 36, 89, var(--bg-opacity));
   }
 
+  .lg\:bg-none {
+    background-image: none;
+  }
+
   .lg\:bg-gradient-to-t {
     background-image: linear-gradient(to top, var(--gradient-color-stops));
   }
@@ -75641,6 +75657,10 @@ video {
     background-color: rgba(112, 36, 89, var(--bg-opacity));
   }
 
+  .xl\:bg-none {
+    background-image: none;
+  }
+
   .xl\:bg-gradient-to-t {
     background-image: linear-gradient(to top, var(--gradient-color-stops));
   }