Add background repeat utilities

Author: MichaelDeBoey

__tests__/fixtures/tailwind-output.css

@@ -1247,6 +1247,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;
 }
@@ -5102,6 +5118,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;
   }
@@ -8958,6 +8990,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;
   }
@@ -12814,6 +12862,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;
   }
@@ -16670,6 +16734,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;
   }

defaultConfig.stub.js

@@ -776,6 +776,7 @@ module.exports = {
     backgroundAttachment: ['responsive'],
     backgroundColors: ['responsive', 'hover'],
     backgroundPosition: ['responsive'],
+    backgroundRepeat: ['responsive'],
     backgroundSize: ['responsive'],
     borderColors: ['responsive', 'hover'],
     borderRadius: ['responsive'],

docs/navigation.php

@@ -17,6 +17,7 @@
         'Backgrounds' => [
             'Color' => 'background-color',
             'Position' => 'background-position',
+            'Repeat' => 'background-repeat',
             'Size' => 'background-size',
             'Attachment' => 'background-attachment',
         ],

docs/source/docs/background-repeat.md

@@ -0,0 +1,37 @@
+---
+extends: _layouts.documentation
+title: "Background Repeat"
+description: "Utilities for controlling the repetition of an element's background image."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
+---
+
+@include('_partials.work-in-progress')
+
+@include('_partials.class-table', [
+  'rows' => [
+    [
+      '.bg-repeat',
+      'background-repeat: repeat;',
+      'Repeat the background image both vertically and horizontally.',
+    ],
+    [
+      '.bg-no-repeat',
+      'background-repeat: no-repeat;',
+      'Don\'t repeat the background image.',
+    ],
+    [
+      '.bg-repeat-x',
+      'background-repeat: repeat-x;',
+      'Repeat the background image only horizontally.',
+    ],
+    [
+      '.bg-repeat-y',
+      'background-repeat: repeat-y;',
+      'Repeat the background image only vertically.',
+    ],
+  ]
+])

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' },
+  })
+}

src/utilityModules.js

@@ -3,6 +3,7 @@ import appearance from './generators/appearance'
 import backgroundAttachment from './generators/backgroundAttachment'
 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'
@@ -47,6 +48,7 @@ export default [
   { name: 'backgroundAttachment', generator: backgroundAttachment },
   { name: 'backgroundColors', generator: backgroundColors },
   { name: 'backgroundPosition', generator: backgroundPosition },
+  { name: 'backgroundRepeat', generator: backgroundRepeat },
   { name: 'backgroundSize', generator: backgroundSize },
   { name: 'borderColors', generator: borderColors },
   { name: 'borderRadius', generator: borderRadius },