Merge branch 'benface-issue/608'

Author: adamwathan

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

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