Repository: tailwindlabs/tailwindcss

Problem statement:
Utility Request: background-repeat 
I believe the background-repeat utility is missing. Any specific reason why it is not included? 


Hints:
No specific reason, just haven't gotten around to discussing it yet. What values do you think are smart to include by default? I'm thinking at least `bg-repeat` and `bg-no-repeat` but not sure if the others are commonly used enough to justify including by default.
I would like at least `bg-repeat-x` and `bg-repeat-y`. I personally don't care about the `space` and `round` values and don't think they're commonly used.
Well, for starters it is a fail safe when used with `background-position: center`.

Also in practise, a quick way to always make your content responsive for all screen sizes were `background: no-repeat center / cover`, which translates to:
```
background-repeat: no-repeat;
background-position: center;
background-size: cover; // or contain
```
So I think we still need this utility. 

I'll leave the class syntax for you to decide since I haven't got around to fully understand Tailwind's syntax standards yet. 
The implicit value is repeat so bg-repeat its not so useful. In a situation when you dynamically want to change a background (bg-no-repeat) into a repeat you just remove that class.  I agree with @benface for the `bg-repeat-x` and `bg-repeat-y` and ofc `bg-no-repeat` its a must in my opinion
> The implicit value is repeat so bg-repeat its not so useful.

Actually this means it's mandatory to include if we have any background-repeat utilities, otherwise there is no way to get back to a default state at larger screen sizes.

So I think the four we should add are:

```
bg-repeat
bg-no-repeat
bg-repeat-x
bg-repeat-y
```

Happy to accept a PR for getting this started, otherwise I can start something if I have time over the next few days.
@pxwee5 as you initiated it do u have time in making that PR? i would call the generator `backgroundRepeat.js`. @adamwathan what do you think ?

@sorinr @pxwee5 PR is on it's way 🙂😉

Patch:
diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js
--- a/defaultConfig.stub.js
+++ b/defaultConfig.stub.js
@@ -775,6 +775,7 @@ module.exports = {
     appearance: ['responsive'],
     backgroundColors: ['responsive', 'hover'],
     backgroundPosition: ['responsive'],
+    backgroundRepeat: ['responsive'],
     backgroundSize: ['responsive'],
     borderColors: ['responsive', 'hover'],
     borderRadius: ['responsive'],
diff --git a/src/generators/backgroundRepeat.js b/src/generators/backgroundRepeat.js
new file mode 100644
--- /dev/null
+++ b/src/generators/backgroundRepeat.js
@@ -0,0 +1,10 @@
+import defineClasses from '../util/defineClasses'
+
+export default function() {
+  return defineClasses({
+    'bg-repeat': { 'background-repeat': 'repeat' },
+    'bg-no-repeat': { 'background-repeat': 'no-repeat' },
+    'bg-repeat-x': { 'background-repeat': 'repeat-x' },
+    'bg-repeat-y': { 'background-repeat': 'repeat-y' },
+  })
+}
diff --git a/src/utilityModules.js b/src/utilityModules.js
--- a/src/utilityModules.js
+++ b/src/utilityModules.js
@@ -2,6 +2,7 @@ import lists from './generators/lists'
 import appearance from './generators/appearance'
 import backgroundColors from './generators/backgroundColors'
 import backgroundPosition from './generators/backgroundPosition'
+import backgroundRepeat from './generators/backgroundRepeat'
 import backgroundSize from './generators/backgroundSize'
 import borderColors from './generators/borderColors'
 import borderRadius from './generators/borderRadius'
@@ -45,6 +46,7 @@ export default [
   { name: 'appearance', generator: appearance },
   { name: 'backgroundColors', generator: backgroundColors },
   { name: 'backgroundPosition', generator: backgroundPosition },
+  { name: 'backgroundRepeat', generator: backgroundRepeat },
   { name: 'backgroundSize', generator: backgroundSize },
   { name: 'borderColors', generator: borderColors },
   { name: 'borderRadius', generator: borderRadius },


Test patch:
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -1235,6 +1235,22 @@ button,
   background-position: top;
 }
 
+.bg-repeat {
+  background-repeat: repeat;
+}
+
+.bg-no-repeat {
+  background-repeat: no-repeat;
+}
+
+.bg-repeat-x {
+  background-repeat: repeat-x;
+}
+
+.bg-repeat-y {
+  background-repeat: repeat-y;
+}
+
 .bg-cover {
   background-size: cover;
 }
@@ -5078,6 +5094,22 @@ button,
     background-position: top;
   }
 
+  .sm\:bg-repeat {
+    background-repeat: repeat;
+  }
+
+  .sm\:bg-no-repeat {
+    background-repeat: no-repeat;
+  }
+
+  .sm\:bg-repeat-x {
+    background-repeat: repeat-x;
+  }
+
+  .sm\:bg-repeat-y {
+    background-repeat: repeat-y;
+  }
+
   .sm\:bg-cover {
     background-size: cover;
   }
@@ -8922,6 +8954,22 @@ button,
     background-position: top;
   }
 
+  .md\:bg-repeat {
+    background-repeat: repeat;
+  }
+
+  .md\:bg-no-repeat {
+    background-repeat: no-repeat;
+  }
+
+  .md\:bg-repeat-x {
+    background-repeat: repeat-x;
+  }
+
+  .md\:bg-repeat-y {
+    background-repeat: repeat-y;
+  }
+
   .md\:bg-cover {
     background-size: cover;
   }
@@ -12766,6 +12814,22 @@ button,
     background-position: top;
   }
 
+  .lg\:bg-repeat {
+    background-repeat: repeat;
+  }
+
+  .lg\:bg-no-repeat {
+    background-repeat: no-repeat;
+  }
+
+  .lg\:bg-repeat-x {
+    background-repeat: repeat-x;
+  }
+
+  .lg\:bg-repeat-y {
+    background-repeat: repeat-y;
+  }
+
   .lg\:bg-cover {
     background-size: cover;
   }
@@ -16610,6 +16674,22 @@ button,
     background-position: top;
   }
 
+  .xl\:bg-repeat {
+    background-repeat: repeat;
+  }
+
+  .xl\:bg-no-repeat {
+    background-repeat: no-repeat;
+  }
+
+  .xl\:bg-repeat-x {
+    background-repeat: repeat-x;
+  }
+
+  .xl\:bg-repeat-y {
+    background-repeat: repeat-y;
+  }
+
   .xl\:bg-cover {
     background-size: cover;
   }