[0.5] Move container component to a built-in plugin

__tests__/fixtures/tailwind-input.css

@@ -1,5 +1,7 @@
 @tailwind preflight;
 
+@tailwind components;
+
 @tailwind utilities;
 
 @responsive {

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')(),
+  ],
 
 
   /*

plugins/container.js

@@ -0,0 +1 @@
+module.exports = require('../lib/plugins/container')

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

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({

src/generators/container.js → 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,
+    ])
+  }
 }