diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js index 974da5ad8..106fc7ee3 100644 --- a/defaultConfig.stub.js +++ b/defaultConfig.stub.js @@ -367,6 +367,33 @@ module.exports = { backgroundColors: colors, + /* + |----------------------------------------------------------------------------- + | Background positions https://tailwindcss.com/docs/background-position + |----------------------------------------------------------------------------- + | + | 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/plugins/backgroundPosition.js b/src/plugins/backgroundPosition.js index 3a5144b45..3173e94f8 100644 --- a/src/plugins/backgroundPosition.js +++ b/src/plugins/backgroundPosition.js @@ -1,18 +1,18 @@ +import _ from 'lodash' + export default function() { - return function({ addUtilities, config }) { - addUtilities( - { - '.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' }, - }, - config('modules.backgroundPosition') + return function({ addUtilities, config, e }) { + const utilities = _.fromPairs( + _.map(config('backgroundPosition'), (value, modifier) => { + return [ + `.${e(`bg-${modifier}`)}`, + { + 'background-position': value, + }, + ] + }) ) + + addUtilities(utilities, config('modules.backgroundPosition')) } }