Merge branch 'hacknug-feature/backgroundSizes' into 0.5

__tests__/fixtures/tailwind-output.css

@@ -1295,6 +1295,10 @@ button,
   background-repeat: repeat-y;
 }
 
+.bg-auto {
+  background-size: auto;
+}
+
 .bg-cover {
   background-size: cover;
 }
@@ -5182,6 +5186,10 @@ button,
     background-repeat: repeat-y;
   }
 
+  .sm\:bg-auto {
+    background-size: auto;
+  }
+
   .sm\:bg-cover {
     background-size: cover;
   }
@@ -9062,6 +9070,10 @@ button,
     background-repeat: repeat-y;
   }
 
+  .md\:bg-auto {
+    background-size: auto;
+  }
+
   .md\:bg-cover {
     background-size: cover;
   }
@@ -12942,6 +12954,10 @@ button,
     background-repeat: repeat-y;
   }
 
+  .lg\:bg-auto {
+    background-size: auto;
+  }
+
   .lg\:bg-cover {
     background-size: cover;
   }
@@ -16822,6 +16838,10 @@ button,
     background-repeat: repeat-y;
   }
 
+  .xl\:bg-auto {
+    background-size: auto;
+  }
+
   .xl\:bg-cover {
     background-size: cover;
   }

defaultConfig.stub.js

@@ -360,6 +360,26 @@ module.exports = {
   backgroundColors: colors,
 
 
+  /*
+  |-----------------------------------------------------------------------------
+  | Background sizes               https://tailwindcss.com/docs/background-size
+  |-----------------------------------------------------------------------------
+  |
+  | Here is where you define your background sizes. We provide some common
+  | values that are useful in most projects, but feel free to add other sizes
+  | that are specific to your project here as well.
+  |
+  | Class name: .bg-{size}
+  |
+  */
+
+  backgroundSize: {
+    'auto': 'auto',
+    'cover': 'cover',
+    'contain': 'contain',
+  },
+
+
   /*
   |-----------------------------------------------------------------------------
   | Border widths                     https://tailwindcss.com/docs/border-width

src/generators/backgroundSize.js

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