Repository: tailwindlabs/tailwindcss
Pull request #2168 (2020-08-15 20:24:35)

Add background-clip utilities
This PR adds new [background-clip](https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip) utilities to Tailwind, that I'm pretty much only adding for `bg-clip-text` so we can do trendy gradient stuff with the default build after we add gradient support 👀 

New classes:

| Class | CSS |
| --- | --- |
| `bg-clip-border`| `background-clip: border-box` |
| `bg-clip-padding`| `background-clip: padding-box` |
| `bg-clip-content`| `background-clip: content-box` |
| `bg-clip-text`| `background-clip: text` |




Patch:
diff --git a/src/corePlugins.js b/src/corePlugins.js
index 2a14f2b0..e9c6e9cd 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -6,6 +6,7 @@ import divideColor from './plugins/divideColor'
 import accessibility from './plugins/accessibility'
 import appearance from './plugins/appearance'
 import backgroundAttachment from './plugins/backgroundAttachment'
+import backgroundClip from './plugins/backgroundClip'
 import backgroundColor from './plugins/backgroundColor'
 import backgroundPosition from './plugins/backgroundPosition'
 import backgroundRepeat from './plugins/backgroundRepeat'
@@ -113,6 +114,7 @@ export default function({ corePlugins: corePluginConfig }) {
     accessibility,
     appearance,
     backgroundAttachment,
+    backgroundClip,
     backgroundColor,
     backgroundOpacity,
     backgroundPosition,
diff --git a/src/plugins/backgroundClip.js b/src/plugins/backgroundClip.js
new file mode 100644
index 00000000..1931199d
--- /dev/null
+++ b/src/plugins/backgroundClip.js
@@ -0,0 +1,17 @@
+export default function() {
+  return function({ addUtilities, variants, target }) {
+    addUtilities(
+      {
+        '.bg-clip-border': { 'background-clip': 'border-box' },
+        '.bg-clip-padding': { 'background-clip': 'padding-box' },
+        '.bg-clip-content': { 'background-clip': 'content-box' },
+        ...(target('display') === 'ie11'
+          ? {}
+          : {
+              '.bg-clip-text': { 'background-clip': 'text' },
+            }),
+      },
+      variants('backgroundClip')
+    )
+  }
+}
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index 398b26f8..356acfc4 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -658,6 +658,7 @@ module.exports = {
     alignSelf: ['responsive'],
     appearance: ['responsive'],
     backgroundAttachment: ['responsive'],
+    backgroundClip: ['responsive'],
     backgroundColor: ['responsive', 'hover', 'focus'],
     backgroundOpacity: ['responsive', 'hover', 'focus'],
     backgroundPosition: ['responsive'],


Test patch:
diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css
index 88a5889b..8616b99a 100644
--- a/__tests__/fixtures/tailwind-output-flagged.css
+++ b/__tests__/fixtures/tailwind-output-flagged.css
@@ -2907,6 +2907,22 @@ video {
   background-attachment: scroll;
 }
 
+.bg-clip-border {
+  background-clip: border-box;
+}
+
+.bg-clip-padding {
+  background-clip: padding-box;
+}
+
+.bg-clip-content {
+  background-clip: content-box;
+}
+
+.bg-clip-text {
+  background-clip: text;
+}
+
 .bg-transparent {
   background-color: transparent;
 }
@@ -27988,6 +28004,22 @@ video {
     background-attachment: scroll;
   }
 
+  .sm\:bg-clip-border {
+    background-clip: border-box;
+  }
+
+  .sm\:bg-clip-padding {
+    background-clip: padding-box;
+  }
+
+  .sm\:bg-clip-content {
+    background-clip: content-box;
+  }
+
+  .sm\:bg-clip-text {
+    background-clip: text;
+  }
+
   .sm\:bg-transparent {
     background-color: transparent;
   }
@@ -53039,6 +53071,22 @@ video {
     background-attachment: scroll;
   }
 
+  .md\:bg-clip-border {
+    background-clip: border-box;
+  }
+
+  .md\:bg-clip-padding {
+    background-clip: padding-box;
+  }
+
+  .md\:bg-clip-content {
+    background-clip: content-box;
+  }
+
+  .md\:bg-clip-text {
+    background-clip: text;
+  }
+
   .md\:bg-transparent {
     background-color: transparent;
   }
@@ -78090,6 +78138,22 @@ video {
     background-attachment: scroll;
   }
 
+  .lg\:bg-clip-border {
+    background-clip: border-box;
+  }
+
+  .lg\:bg-clip-padding {
+    background-clip: padding-box;
+  }
+
+  .lg\:bg-clip-content {
+    background-clip: content-box;
+  }
+
+  .lg\:bg-clip-text {
+    background-clip: text;
+  }
+
   .lg\:bg-transparent {
     background-color: transparent;
   }
@@ -103141,6 +103205,22 @@ video {
     background-attachment: scroll;
   }
 
+  .xl\:bg-clip-border {
+    background-clip: border-box;
+  }
+
+  .xl\:bg-clip-padding {
+    background-clip: padding-box;
+  }
+
+  .xl\:bg-clip-content {
+    background-clip: content-box;
+  }
+
+  .xl\:bg-clip-text {
+    background-clip: text;
+  }
+
   .xl\:bg-transparent {
     background-color: transparent;
   }
diff --git a/__tests__/fixtures/tailwind-output-ie11.css b/__tests__/fixtures/tailwind-output-ie11.css
index 82f67cf2..8eff70f7 100644
--- a/__tests__/fixtures/tailwind-output-ie11.css
+++ b/__tests__/fixtures/tailwind-output-ie11.css
@@ -1379,6 +1379,18 @@ video {
   background-attachment: scroll;
 }
 
+.bg-clip-border {
+  background-clip: border-box;
+}
+
+.bg-clip-padding {
+  background-clip: padding-box;
+}
+
+.bg-clip-content {
+  background-clip: content-box;
+}
+
 .bg-transparent {
   background-color: transparent;
 }
@@ -11809,6 +11821,18 @@ video {
     background-attachment: scroll;
   }
 
+  .sm\:bg-clip-border {
+    background-clip: border-box;
+  }
+
+  .sm\:bg-clip-padding {
+    background-clip: padding-box;
+  }
+
+  .sm\:bg-clip-content {
+    background-clip: content-box;
+  }
+
   .sm\:bg-transparent {
     background-color: transparent;
   }
@@ -22209,6 +22233,18 @@ video {
     background-attachment: scroll;
   }
 
+  .md\:bg-clip-border {
+    background-clip: border-box;
+  }
+
+  .md\:bg-clip-padding {
+    background-clip: padding-box;
+  }
+
+  .md\:bg-clip-content {
+    background-clip: content-box;
+  }
+
   .md\:bg-transparent {
     background-color: transparent;
   }
@@ -32609,6 +32645,18 @@ video {
     background-attachment: scroll;
   }
 
+  .lg\:bg-clip-border {
+    background-clip: border-box;
+  }
+
+  .lg\:bg-clip-padding {
+    background-clip: padding-box;
+  }
+
+  .lg\:bg-clip-content {
+    background-clip: content-box;
+  }
+
   .lg\:bg-transparent {
     background-color: transparent;
   }
@@ -43009,6 +43057,18 @@ video {
     background-attachment: scroll;
   }
 
+  .xl\:bg-clip-border {
+    background-clip: border-box;
+  }
+
+  .xl\:bg-clip-padding {
+    background-clip: padding-box;
+  }
+
+  .xl\:bg-clip-content {
+    background-clip: content-box;
+  }
+
   .xl\:bg-transparent {
     background-color: transparent;
   }
diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index ce8707b4..c8dfb407 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -1767,6 +1767,22 @@ video {
   background-attachment: scroll !important;
 }
 
+.bg-clip-border {
+  background-clip: border-box !important;
+}
+
+.bg-clip-padding {
+  background-clip: padding-box !important;
+}
+
+.bg-clip-content {
+  background-clip: content-box !important;
+}
+
+.bg-clip-text {
+  background-clip: text !important;
+}
+
 .bg-transparent {
   background-color: transparent !important;
 }
@@ -15813,6 +15829,22 @@ video {
     background-attachment: scroll !important;
   }
 
+  .sm\:bg-clip-border {
+    background-clip: border-box !important;
+  }
+
+  .sm\:bg-clip-padding {
+    background-clip: padding-box !important;
+  }
+
+  .sm\:bg-clip-content {
+    background-clip: content-box !important;
+  }
+
+  .sm\:bg-clip-text {
+    background-clip: text !important;
+  }
+
   .sm\:bg-transparent {
     background-color: transparent !important;
   }
@@ -29829,6 +29861,22 @@ video {
     background-attachment: scroll !important;
   }
 
+  .md\:bg-clip-border {
+    background-clip: border-box !important;
+  }
+
+  .md\:bg-clip-padding {
+    background-clip: padding-box !important;
+  }
+
+  .md\:bg-clip-content {
+    background-clip: content-box !important;
+  }
+
+  .md\:bg-clip-text {
+    background-clip: text !important;
+  }
+
   .md\:bg-transparent {
     background-color: transparent !important;
   }
@@ -43845,6 +43893,22 @@ video {
     background-attachment: scroll !important;
   }
 
+  .lg\:bg-clip-border {
+    background-clip: border-box !important;
+  }
+
+  .lg\:bg-clip-padding {
+    background-clip: padding-box !important;
+  }
+
+  .lg\:bg-clip-content {
+    background-clip: content-box !important;
+  }
+
+  .lg\:bg-clip-text {
+    background-clip: text !important;
+  }
+
   .lg\:bg-transparent {
     background-color: transparent !important;
   }
@@ -57861,6 +57925,22 @@ video {
     background-attachment: scroll !important;
   }
 
+  .xl\:bg-clip-border {
+    background-clip: border-box !important;
+  }
+
+  .xl\:bg-clip-padding {
+    background-clip: padding-box !important;
+  }
+
+  .xl\:bg-clip-content {
+    background-clip: content-box !important;
+  }
+
+  .xl\:bg-clip-text {
+    background-clip: text !important;
+  }
+
   .xl\:bg-transparent {
     background-color: transparent !important;
   }
diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css
index 421bbb91..ae0fcf3c 100644
--- a/__tests__/fixtures/tailwind-output-no-color-opacity.css
+++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css
@@ -1563,6 +1563,22 @@ video {
   background-attachment: scroll;
 }
 
+.bg-clip-border {
+  background-clip: border-box;
+}
+
+.bg-clip-padding {
+  background-clip: padding-box;
+}
+
+.bg-clip-content {
+  background-clip: content-box;
+}
+
+.bg-clip-text {
+  background-clip: text;
+}
+
 .bg-transparent {
   background-color: transparent;
 }
@@ -13161,6 +13177,22 @@ video {
     background-attachment: scroll;
   }
 
+  .sm\:bg-clip-border {
+    background-clip: border-box;
+  }
+
+  .sm\:bg-clip-padding {
+    background-clip: padding-box;
+  }
+
+  .sm\:bg-clip-content {
+    background-clip: content-box;
+  }
+
+  .sm\:bg-clip-text {
+    background-clip: text;
+  }
+
   .sm\:bg-transparent {
     background-color: transparent;
   }
@@ -24729,6 +24761,22 @@ video {
     background-attachment: scroll;
   }
 
+  .md\:bg-clip-border {
+    background-clip: border-box;
+  }
+
+  .md\:bg-clip-padding {
+    background-clip: padding-box;
+  }
+
+  .md\:bg-clip-content {
+    background-clip: content-box;
+  }
+
+  .md\:bg-clip-text {
+    background-clip: text;
+  }
+
   .md\:bg-transparent {
     background-color: transparent;
   }
@@ -36297,6 +36345,22 @@ video {
     background-attachment: scroll;
   }
 
+  .lg\:bg-clip-border {
+    background-clip: border-box;
+  }
+
+  .lg\:bg-clip-padding {
+    background-clip: padding-box;
+  }
+
+  .lg\:bg-clip-content {
+    background-clip: content-box;
+  }
+
+  .lg\:bg-clip-text {
+    background-clip: text;
+  }
+
   .lg\:bg-transparent {
     background-color: transparent;
   }
@@ -47865,6 +47929,22 @@ video {
     background-attachment: scroll;
   }
 
+  .xl\:bg-clip-border {
+    background-clip: border-box;
+  }
+
+  .xl\:bg-clip-padding {
+    background-clip: padding-box;
+  }
+
+  .xl\:bg-clip-content {
+    background-clip: content-box;
+  }
+
+  .xl\:bg-clip-text {
+    background-clip: text;
+  }
+
   .xl\:bg-transparent {
     background-color: transparent;
   }
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 3f8e6681..2a4543d3 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -1767,6 +1767,22 @@ video {
   background-attachment: scroll;
 }
 
+.bg-clip-border {
+  background-clip: border-box;
+}
+
+.bg-clip-padding {
+  background-clip: padding-box;
+}
+
+.bg-clip-content {
+  background-clip: content-box;
+}
+
+.bg-clip-text {
+  background-clip: text;
+}
+
 .bg-transparent {
   background-color: transparent;
 }
@@ -15813,6 +15829,22 @@ video {
     background-attachment: scroll;
   }
 
+  .sm\:bg-clip-border {
+    background-clip: border-box;
+  }
+
+  .sm\:bg-clip-padding {
+    background-clip: padding-box;
+  }
+
+  .sm\:bg-clip-content {
+    background-clip: content-box;
+  }
+
+  .sm\:bg-clip-text {
+    background-clip: text;
+  }
+
   .sm\:bg-transparent {
     background-color: transparent;
   }
@@ -29829,6 +29861,22 @@ video {
     background-attachment: scroll;
   }
 
+  .md\:bg-clip-border {
+    background-clip: border-box;
+  }
+
+  .md\:bg-clip-padding {
+    background-clip: padding-box;
+  }
+
+  .md\:bg-clip-content {
+    background-clip: content-box;
+  }
+
+  .md\:bg-clip-text {
+    background-clip: text;
+  }
+
   .md\:bg-transparent {
     background-color: transparent;
   }
@@ -43845,6 +43893,22 @@ video {
     background-attachment: scroll;
   }
 
+  .lg\:bg-clip-border {
+    background-clip: border-box;
+  }
+
+  .lg\:bg-clip-padding {
+    background-clip: padding-box;
+  }
+
+  .lg\:bg-clip-content {
+    background-clip: content-box;
+  }
+
+  .lg\:bg-clip-text {
+    background-clip: text;
+  }
+
   .lg\:bg-transparent {
     background-color: transparent;
   }
@@ -57861,6 +57925,22 @@ video {
     background-attachment: scroll;
   }
 
+  .xl\:bg-clip-border {
+    background-clip: border-box;
+  }
+
+  .xl\:bg-clip-padding {
+    background-clip: padding-box;
+  }
+
+  .xl\:bg-clip-content {
+    background-clip: content-box;
+  }
+
+  .xl\:bg-clip-text {
+    background-clip: text;
+  }
+
   .xl\:bg-transparent {
     background-color: transparent;
   }