Allow users to set their own backgroundSize

defaultConfig.stub.js

@@ -360,6 +360,28 @@ module.exports = {
   backgroundColors: colors,
 
 
+  /*
+  |-----------------------------------------------------------------------------
+  | Background sizes              https://tailwindcss.com/docs/background-color
+  |-----------------------------------------------------------------------------
+  |
+  | Here is where you define your background sizes. These can take one or two
+  | values depending on your needs. The first value will set the image's width
+  | while the second will set its height. Using just one will be the same as
+  | setting the image's height to auto. For multiple backgrounds, use comma
+  | separated values to define the size of each one of them.
+  |
+  | Class name: .bg-{size}
+  |
+  */
+
+  backgroundSize: {
+    'auto': 'auto',
+    'cover': 'cover',
+    'contain': 'contain',
+  },
+
+
   /*
   |-----------------------------------------------------------------------------
   | Border widths                     https://tailwindcss.com/docs/border-width

src/generators/backgroundSize.js

@@ -1,15 +1,10 @@
-import defineClasses from '../util/defineClasses'
+import _ from 'lodash'
+import defineClass from '../util/defineClass'
 
-export default function() {
-  return defineClasses({
-    'bg-auto': {
-      'background-size': 'auto',
-    },
-    'bg-cover': {
-      'background-size': 'cover',
-    },
-    'bg-contain': {
-      'background-size': 'contain',
-    },
+export default function({ backgroundSizes }) {
+  return _.map(backgroundSizes, (size, className) => {
+    return defineClass(`bg-${className}`, {
+      'background-size': size,
+    })
   })
 }