Update to Tailwind v0.5.1

package.json

@@ -12,10 +12,7 @@
     "gulp-purgecss": "^0.20.0",
     "gulp-util": "^3.0.8",
     "postcss-import": "^11.1.0",
-    "tailwindcss": "^0.4.2"
+    "tailwindcss": "^0.5.1"
-  },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "Taylor Bryant",
   "license": "ISC"

src/style.css

@@ -5,53 +5,59 @@
  * You can see the styles here:
  * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
  *
- * If using `postcss-import`, you should import this line from it's own file:
+ * If using `postcss-import`, use this import instead:
  *
- * @import "./tailwind-preflight.css";
+ * @import "tailwindcss/preflight";
- *
- * See: https://github.com/tailwindcss/tailwindcss/issues/53#issuecomment-341413622
  */
-@tailwind preflight;
+ @tailwind preflight;
 
-/**
+ /**
- * Here you would add any of your custom component classes; stuff that you'd
+  * This injects any component classes registered by plugins.
- * want loaded *before* the utilities so that the utilities could still
+  *
- * override them.
+  * If using `postcss-import`, use this import instead:
- *
+  *
- * Example:
+  * @import "tailwindcss/components";
- *
+  */
- * .btn { ... }
+ @tailwind components;
- * .form-input { ... }
+ 
- *
+ /**
- * Or if using a preprocessor or `postcss-import`:
+  * Here you would add any of your custom component classes; stuff that you'd
- *
+  * want loaded *before* the utilities so that the utilities could still
- * @import "components/buttons";
+  * override them.
- * @import "components/forms";
+  *
- */
+  * Example:
-
+  *
-/**
+  * .btn { ... }
- * This injects all of Tailwind's utility classes, generated based on your
+  * .form-input { ... }
- * config file.
+  *
- *
+  * Or if using a preprocessor or `postcss-import`:
- * If using `postcss-import`, you should import this line from it's own file:
+  *
- *
+  * @import "components/buttons";
- * @import "./tailwind-utilities.css";
+  * @import "components/forms";
- *
+  */
- * See: https://github.com/tailwindcss/tailwindcss/issues/53#issuecomment-341413622
+ 
- */
+ /**
-@tailwind utilities;
+  * This injects all of Tailwind's utility classes, generated based on your
-
+  * config file.
-/**
+  *
- * Here you would add any custom utilities you need that don't come out of the
+  * If using `postcss-import`, use this import instead:
- * box with Tailwind.
+  *
- *
+  * @import "tailwindcss/utilities";
- * Example :
+  */
- *
+ @tailwind utilities;
- * .bg-pattern-graph-paper { ... }
+ 
- * .skew-45 { ... }
+ /**
- *
+  * Here you would add any custom utilities you need that don't come out of the
- * Or if using a preprocessor or `postcss-import`:
+  * box with Tailwind.
- *
+  *
- * @import "utilities/background-patterns";
+  * Example :
- * @import "utilities/skew-transforms";
+  *
- */
+  * .bg-pattern-graph-paper { ... }
+  * .skew-45 { ... }
+  *
+  * Or if using a preprocessor or `postcss-import`:
+  *
+  * @import "utilities/background-patterns";
+  * @import "utilities/skew-transforms";
+  */
+ 

tailwind.js

@@ -24,7 +24,7 @@ View the full documentation at https://tailwindcss.com.
 |
 */
 
-let defaultConfig = require('tailwindcss/defaultConfig')()
+// let defaultConfig = require('tailwindcss/defaultConfig')()
 
 
 /*
@@ -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
@@ -399,7 +419,7 @@ module.exports = {
   |
   */
 
-  borderColors: Object.assign({ default: colors['grey-light'] }, colors),
+  borderColors: global.Object.assign({ default: colors['grey-light'] }, colors),
 
 
   /*
@@ -804,7 +824,12 @@ module.exports = {
   | Here is where you control which modules are generated and what variants are
   | generated for each of those modules.
   |
-  | Currently supported variants: 'responsive', 'hover', 'focus', 'group-hover'
+  | Currently supported variants:
+  |   - responsive
+  |   - hover
+  |   - focus
+  |   - active
+  |   - group-hover
   |
   | To disable a module completely, use `false` instead of an array.
   |
@@ -859,6 +884,28 @@ module.exports = {
   },
 
 
+  /*
+  |-----------------------------------------------------------------------------
+  | Plugins                                https://tailwindcss.com/docs/plugins
+  |-----------------------------------------------------------------------------
+  |
+  | Here is where you can register any plugins you'd like to use in your
+  | project. Tailwind's built-in `container` plugin is enabled by default to
+  | give you a Bootstrap-style responsive container component out of the box.
+  |
+  | Be sure to view the complete plugin documentation to learn more about how
+  | the plugin system works.
+  |
+  */
+
+  plugins: [
+    require('tailwindcss/plugins/container')({
+      // center: true,
+      // padding: '1rem',
+    }),
+  ],
+
+
   /*
   |-----------------------------------------------------------------------------
   | Advanced Options         https://tailwindcss.com/docs/configuration#options