diff --git a/__tests__/fixtures/tailwind-input.css b/__tests__/fixtures/tailwind-input.css
index ac3999689618..53204f9fd112 100644
--- a/__tests__/fixtures/tailwind-input.css
+++ b/__tests__/fixtures/tailwind-input.css
@@ -1,5 +1,7 @@
 @tailwind preflight;
 
+@tailwind components;
+
 @tailwind utilities;
 
 @responsive {
diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js
index a848eae6a61e..f63937827f26 100644
--- a/defaultConfig.stub.js
+++ b/defaultConfig.stub.js
@@ -864,15 +864,18 @@ module.exports = {
   | Plugins                                https://tailwindcss.com/docs/plugins
   |-----------------------------------------------------------------------------
   |
-  | Here is where you can register any additional plugins you'd like to use in
-  | your project.
+  | 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: [],
+  plugins: [
+    require('./plugins/container')(),
+  ],
 
 
   /*
diff --git a/plugins/container.js b/plugins/container.js
new file mode 100644
index 000000000000..32710da91fe5
--- /dev/null
+++ b/plugins/container.js
@@ -0,0 +1 @@
+module.exports = require('../lib/plugins/container')
diff --git a/src/cli.js b/src/cli.js
index 7ed4724778df..18b25584e01f 100755
--- a/src/cli.js
+++ b/src/cli.js
@@ -54,6 +54,10 @@ program
 
     const output = fs.readFileSync(path.resolve(__dirname, '../defaultConfig.stub.js'), 'utf8')
     fs.outputFileSync(destination, output.replace('// let defaultConfig', 'let defaultConfig'))
+    fs.outputFileSync(
+      destination,
+      output.replace("require('./plugins/container')", "require('tailwindcss/plugins/container')")
+    )
     console.log(`Generated Tailwind config: ${destination}`)
     process.exit()
   })
diff --git a/src/lib/substituteTailwindAtRules.js b/src/lib/substituteTailwindAtRules.js
index 8fba3d8dfebc..70cdaa10ce79 100644
--- a/src/lib/substituteTailwindAtRules.js
+++ b/src/lib/substituteTailwindAtRules.js
@@ -1,6 +1,5 @@
 import fs from 'fs'
 import postcss from 'postcss'
-import container from '../generators/container'
 import utilityModules from '../utilityModules'
 import prefixTree from '../util/prefixTree'
 import generateModules from '../util/generateModules'
@@ -39,7 +38,7 @@ export default function(config) {
         }
 
         const tailwindUtilityTree = postcss.root({
-          nodes: [...container(unwrappedConfig), ...utilities.nodes],
+          nodes: utilities.nodes,
         })
 
         const pluginUtilityTree = postcss.root({
diff --git a/src/generators/container.js b/src/plugins/container.js
similarity index 52%
rename from src/generators/container.js
rename to src/plugins/container.js
index 3742e2e617bc..8caad7b56c95 100644
--- a/src/generators/container.js
+++ b/src/plugins/container.js
@@ -1,7 +1,5 @@
 /* eslint-disable no-shadow */
 import _ from 'lodash'
-import postcss from 'postcss'
-import defineClass from '../util/defineClass'
 
 function extractMinWidths(breakpoints) {
   return _.flatMap(breakpoints, breakpoints => {
@@ -24,26 +22,29 @@ function extractMinWidths(breakpoints) {
   })
 }
 
-export default function({ screens }) {
-  const minWidths = extractMinWidths(screens)
+module.exports = function(options) {
+  return function({ addComponents, config }) {
+    const screens = _.get(options, 'screens', config('screens'))
 
-  const atRules = _.map(minWidths, minWidth => {
-    const atRule = postcss.atRule({
-      name: 'media',
-      params: `(min-width: ${minWidth})`,
+    const minWidths = extractMinWidths(screens)
+
+    const atRules = _.map(minWidths, minWidth => {
+      return {
+        [`@media (min-width: ${minWidth})`]: {
+          '.container': {
+            'max-width': minWidth,
+          },
+        },
+      }
     })
-    atRule.append(
-      defineClass('container', {
-        'max-width': minWidth,
-      })
-    )
-    return atRule
-  })
 
-  return [
-    defineClass('container', {
-      width: '100%',
-    }),
-    ...atRules,
-  ]
+    addComponents([
+      {
+        '.container': {
+          width: '100%',
+        },
+      },
+      ...atRules,
+    ])
+  }
 }