diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 3e80fd2b3..c6567c328 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__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; } diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js index 35500de94..6d4ec675d 100644 --- a/defaultConfig.stub.js +++ b/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'], diff --git a/docs/navigation.php b/docs/navigation.php index cfd047400..0dc7b0548 100644 --- a/docs/navigation.php +++ b/docs/navigation.php @@ -17,6 +17,7 @@ return [ 'Backgrounds' => [ 'Color' => 'background-color', 'Position' => 'background-position', + 'Repeat' => 'background-repeat', 'Size' => 'background-size', 'Attachment' => 'background-attachment', ], diff --git a/docs/source/docs/background-repeat.md b/docs/source/docs/background-repeat.md new file mode 100644 index 000000000..c1be99d15 --- /dev/null +++ b/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.', + ], + ] +]) \ No newline at end of file diff --git a/src/generators/backgroundRepeat.js b/src/generators/backgroundRepeat.js new file mode 100644 index 000000000..fe3147d7f --- /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 index 6c87524d6..f53aa4589 100644 --- a/src/utilityModules.js +++ b/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 },