diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js index 974da5ad8..5cac850b8 100644 --- a/defaultConfig.stub.js +++ b/defaultConfig.stub.js @@ -367,6 +367,33 @@ module.exports = { backgroundColors: colors, + /* + |----------------------------------------------------------------------------- + | Background positions https://tailwindcss.com/docs/background-positions + |----------------------------------------------------------------------------- + | + | Here is where you define your background positions. We provide some + | common values that are useful in most projects, but feel free to add + | other positions that are specific to your project here as well. + | + | Class name: .bg-{position} + | CSS property: background-position + | + */ + + backgroundPosition: { + 'bottom': 'bottom', + 'center': 'center', + 'left': 'left', + 'left-bottom': 'left bottom', + 'left-top': 'left top', + 'right': 'right', + 'right-bottom': 'right bottom', + 'right-top': 'right top', + 'top': 'top', + }, + + /* |----------------------------------------------------------------------------- | Background sizes https://tailwindcss.com/docs/background-size diff --git a/src/generators/backgroundPosition.js b/src/generators/backgroundPosition.js index 1a1f9b93a..b069a7b0e 100644 --- a/src/generators/backgroundPosition.js +++ b/src/generators/backgroundPosition.js @@ -1,15 +1,10 @@ -import defineClasses from '../util/defineClasses' +import _ from 'lodash' +import defineClass from '../util/defineClass' -export default function() { - return defineClasses({ - 'bg-bottom': { 'background-position': 'bottom' }, - 'bg-center': { 'background-position': 'center' }, - 'bg-left': { 'background-position': 'left' }, - 'bg-left-bottom': { 'background-position': 'left bottom' }, - 'bg-left-top': { 'background-position': 'left top' }, - 'bg-right': { 'background-position': 'right' }, - 'bg-right-bottom': { 'background-position': 'right bottom' }, - 'bg-right-top': { 'background-position': 'right top' }, - 'bg-top': { 'background-position': 'top' }, +export default function({ backgroundPosition }) { + return _.map(backgroundPosition, (position, className) => { + return defineClass(`bg-${className}`, { + 'background-position': position, + }) }) }