From 196f71feb702212e8951a8b8c4515d33192c25ab Mon Sep 17 00:00:00 2001
From: Jamie Barton <hi@jamiebarton.co.uk>
Date: Thu, 8 Nov 2018 13:42:55 +0000
Subject: [PATCH] Refactor with tailwindcss example to use next-css (#5461)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Instead of bundling `postcss-cli` we can now make use of `@zeit/with-css`.

This also means we can get rid of the `<style>` import and concurrent build step for css. 🎉
---
 examples/with-tailwindcss/components/head.js  |  37 --
 examples/with-tailwindcss/components/nav.js   |  59 +--
 examples/with-tailwindcss/next.config.js      |   3 +
 examples/with-tailwindcss/package.json        |  10 +-
 examples/with-tailwindcss/pages/_app.js       |  16 +
 examples/with-tailwindcss/pages/_document.js  |  26 --
 examples/with-tailwindcss/pages/index.js      |   2 -
 .../{styles/config => }/postcss.config.js     |   5 +-
 examples/with-tailwindcss/styles/index.css    |  34 --
 .../{styles/config => }/tailwind.config.js    | 380 +++++++++++++-----
 10 files changed, 315 insertions(+), 257 deletions(-)
 delete mode 100644 examples/with-tailwindcss/components/head.js
 create mode 100644 examples/with-tailwindcss/next.config.js
 create mode 100644 examples/with-tailwindcss/pages/_app.js
 delete mode 100644 examples/with-tailwindcss/pages/_document.js
 rename examples/with-tailwindcss/{styles/config => }/postcss.config.js (52%)
 rename examples/with-tailwindcss/{styles/config => }/tailwind.config.js (71%)

diff --git a/examples/with-tailwindcss/components/head.js b/examples/with-tailwindcss/components/head.js
deleted file mode 100644
index f71df168..00000000
--- a/examples/with-tailwindcss/components/head.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import NextHead from 'next/head'
-import { string } from 'prop-types'
-
-const defaultDescription = ''
-const defaultOGURL = ''
-const defaultOGImage = ''
-
-const Head = (props) => (
-  <NextHead>
-    <meta charset='UTF-8' />
-    <title>{props.title || ''}</title>
-    <meta name='description' content={props.description || defaultDescription} />
-    <meta name='viewport' content='width=device-width, initial-scale=1' />
-    <link rel='icon' sizes='192x192' href='/static/touch-icon.png' />
-    <link rel='apple-touch-icon' href='/static/touch-icon.png' />
-    <link rel='mask-icon' href='/static/favicon-mask.svg' color='#49B882' />
-    <link rel='icon' href='/static/favicon.ico' />
-    <meta property='og:url' content={props.url || defaultOGURL} />
-    <meta property='og:title' content={props.title || ''} />
-    <meta property='og:description' content={props.description || defaultDescription} />
-    <meta name='twitter:site' content={props.url || defaultOGURL} />
-    <meta name='twitter:card' content='summary_large_image' />
-    <meta name='twitter:image' content={props.ogImage || defaultOGImage} />
-    <meta property='og:image' content={props.ogImage || defaultOGImage} />
-    <meta property='og:image:width' content='1200' />
-    <meta property='og:image:height' content='630' />
-  </NextHead>
-)
-
-Head.propTypes = {
-  title: string,
-  description: string,
-  url: string,
-  ogImage: string
-}
-
-export default Head
diff --git a/examples/with-tailwindcss/components/nav.js b/examples/with-tailwindcss/components/nav.js
index b9ad617c..e171967f 100644
--- a/examples/with-tailwindcss/components/nav.js
+++ b/examples/with-tailwindcss/components/nav.js
@@ -1,58 +1,29 @@
 import Link from 'next/link'
-const links = [
-  { href: 'https://github.com/segmentio/create-next-app', label: 'Github' }
-].map(link => {
-  link.key = `nav-link-${link.href}-${link.label}`
-  return link
-})
 
-const Nav = () => (
-  <nav>
-    <ul>
-      <li>
+const links = [
+  { href: 'https://github.com/zeit/next.js', label: 'Github' },
+  { href: 'https://nextjs.org/docs', label: 'Docs' }
+]
+
+export default function Nav () {
+  return <nav>
+    <ul className='flex justify-between items-center p-8'>
+      <li className='list-reset'>
         <Link prefetch href='/'>
-          <a>Home</a>
+          <a className='text-blue no-underline'>Home</a>
         </Link>
       </li>
-      <ul>
+      <ul className='flex justify-between items-center'>
         {links.map(
-          ({ key, href, label }) => (
-            <li key={key}>
+          ({ href, label }) => (
+            <li key={`${href}${label}`} className='list-reset ml-4'>
               <Link href={href}>
-                <a className='btn-blue'>{label}</a>
+                <a className='btn-blue no-underline'>{label}</a>
               </Link>
             </li>
           )
         )}
       </ul>
     </ul>
-
-    <style jsx>{`
-      :global(body) {
-        margin: 0;
-        font-family: -apple-system,BlinkMacSystemFont,Avenir Next,Avenir,Helvetica,sans-serif;
-      }
-      nav {
-        text-align: center;
-      }
-      ul {
-        display: flex;
-        justify-content: space-between;
-      }
-      nav > ul {
-        padding: 4px 16px;
-      }
-      li {
-        display: flex;
-        padding: 6px 8px;
-      }
-      a {
-        color: #067df7;
-        text-decoration: none;
-        font-size: 13px;
-      }
-    `}</style>
   </nav>
-)
-
-export default Nav
+}
diff --git a/examples/with-tailwindcss/next.config.js b/examples/with-tailwindcss/next.config.js
new file mode 100644
index 00000000..00a78beb
--- /dev/null
+++ b/examples/with-tailwindcss/next.config.js
@@ -0,0 +1,3 @@
+const withCSS = require('@zeit/next-css')
+
+module.exports = withCSS({})
diff --git a/examples/with-tailwindcss/package.json b/examples/with-tailwindcss/package.json
index 83b39ca5..a0f92be5 100644
--- a/examples/with-tailwindcss/package.json
+++ b/examples/with-tailwindcss/package.json
@@ -2,13 +2,12 @@
   "name": "with-tailwindcss",
   "version": "1.0.0",
   "scripts": {
-    "dev": "next & yarn dev:css",
-    "dev:css": "postcss styles/index.css --watch -c styles/config/postcss.config.js -o static/css/bundle.css",
-    "build": "next build & yarn build:css",
-    "build:css": "postcss styles/index.css -c styles/config/postcss.config.js -o static/css/bundle.css",
+    "dev": "next",
+    "build": "next build",
     "start": "next start"
   },
   "dependencies": {
+    "@zeit/next-css": "^1.0.1",
     "next": "latest",
     "react": "^16.0.0",
     "react-dom": "^16.0.0"
@@ -16,8 +15,7 @@
   "devDependencies": {
     "autoprefixer": "^7.1.6",
     "cssnano": "^3.10.0",
-    "postcss-cli": "^4.1.1",
     "postcss-easy-import": "^3.0.0",
-    "tailwindcss": "^0.2.2"
+    "tailwindcss": "^0.6.6"
   }
 }
diff --git a/examples/with-tailwindcss/pages/_app.js b/examples/with-tailwindcss/pages/_app.js
new file mode 100644
index 00000000..d6493e19
--- /dev/null
+++ b/examples/with-tailwindcss/pages/_app.js
@@ -0,0 +1,16 @@
+import '../styles/index.css'
+
+import React from 'react'
+import App, { Container } from 'next/app'
+
+export default class MyApp extends App {
+  render () {
+    const { Component, pageProps } = this.props
+
+    return (
+      <Container>
+        <Component {...pageProps} />
+      </Container>
+    )
+  }
+}
diff --git a/examples/with-tailwindcss/pages/_document.js b/examples/with-tailwindcss/pages/_document.js
deleted file mode 100644
index 1e4fa180..00000000
--- a/examples/with-tailwindcss/pages/_document.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import Document, { Head, Main, NextScript } from 'next/document'
-
-class MyDocument extends Document {
-  static getInitialProps ({ renderPage }) {
-    const { html, head, errorHtml, chunks } = renderPage()
-
-    return { html, head, errorHtml, chunks }
-  }
-
-  render () {
-    return (
-      <html>
-        <Head>
-          <link rel='stylesheet' href='/static/css/bundle.css' />
-        </Head>
-        <body>
-          {this.props.customValue}
-          <Main />
-          <NextScript />
-        </body>
-      </html>
-    )
-  }
-}
-
-export default MyDocument
diff --git a/examples/with-tailwindcss/pages/index.js b/examples/with-tailwindcss/pages/index.js
index 2540b352..cbda7621 100644
--- a/examples/with-tailwindcss/pages/index.js
+++ b/examples/with-tailwindcss/pages/index.js
@@ -1,9 +1,7 @@
-import Head from '../components/head'
 import Nav from '../components/nav'
 
 export default () => (
   <div>
-    <Head title='Home' />
     <Nav />
     <div className='hero'>
       <h1 className='title'>Next.js + Tailwind css</h1>
diff --git a/examples/with-tailwindcss/styles/config/postcss.config.js b/examples/with-tailwindcss/postcss.config.js
similarity index 52%
rename from examples/with-tailwindcss/styles/config/postcss.config.js
rename to examples/with-tailwindcss/postcss.config.js
index 3014d180..a8c130a8 100644
--- a/examples/with-tailwindcss/styles/config/postcss.config.js
+++ b/examples/with-tailwindcss/postcss.config.js
@@ -3,8 +3,7 @@ var tailwindcss = require('tailwindcss')
 module.exports = {
   plugins: [
     require('postcss-easy-import'),
-    tailwindcss('./styles/config/tailwind.config.js'),
-    require('autoprefixer'),
-    require('cssnano')
+    tailwindcss('./tailwind.config.js'),
+    require('autoprefixer')
   ]
 }
diff --git a/examples/with-tailwindcss/styles/index.css b/examples/with-tailwindcss/styles/index.css
index c3b331bb..2d26f976 100644
--- a/examples/with-tailwindcss/styles/index.css
+++ b/examples/with-tailwindcss/styles/index.css
@@ -19,37 +19,3 @@
 .title, .description {
   text-align: center;
 }
-
-.row {
-  max-width: 880px;
-  margin: 80px auto 40px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-}
-
-.card {
-  padding: 18px 18px 24px;
-  width: 220px;
-  text-align: left;
-  text-decoration: none;
-  color: #434343;
-  border: 1px solid #9B9B9B;
-}
-
-.card:hover {
-  border-color: #067df7;
-}
-
-.card h3 {
-  margin: 0;
-  color: #067df7;
-  font-size: 18px;
-}
-
-.card p {
-  margin: 0;
-  padding: 12px 0 0;
-  font-size: 13px;
-  color: #333;
-}
diff --git a/examples/with-tailwindcss/styles/config/tailwind.config.js b/examples/with-tailwindcss/tailwind.config.js
similarity index 71%
rename from examples/with-tailwindcss/styles/config/tailwind.config.js
rename to examples/with-tailwindcss/tailwind.config.js
index c28c5f74..97344e08 100644
--- a/examples/with-tailwindcss/styles/config/tailwind.config.js
+++ b/examples/with-tailwindcss/tailwind.config.js
@@ -23,7 +23,7 @@ View the full documentation at https://tailwindcss.com.
 |
 */
 
-// var defaultConfig = require('tailwindcss/defaultConfig')()
+// let defaultConfig = require('tailwindcss/defaultConfig')()
 
 /*
 |-------------------------------------------------------------------------------
@@ -41,31 +41,31 @@ View the full documentation at https://tailwindcss.com.
 |
 */
 
-var colors = {
-  'transparent': 'transparent',
+let colors = {
+  transparent: 'transparent',
 
-  'black': '#222b2f',
-  'grey-darkest': '#364349',
-  'grey-darker': '#596a73',
-  'grey-dark': '#70818a',
-  'grey': '#9babb4',
-  'grey-light': '#dae4e9',
-  'grey-lighter': '#f3f7f9',
-  'grey-lightest': '#fafcfc',
-  'white': '#ffffff',
+  black: '#22292f',
+  'grey-darkest': '#3d4852',
+  'grey-darker': '#606f7b',
+  'grey-dark': '#8795a1',
+  grey: '#b8c2cc',
+  'grey-light': '#dae1e7',
+  'grey-lighter': '#f1f5f8',
+  'grey-lightest': '#f8fafc',
+  white: '#ffffff',
 
-  'red-darkest': '#420806',
-  'red-darker': '#6a1b19',
+  'red-darkest': '#3b0d0c',
+  'red-darker': '#621b18',
   'red-dark': '#cc1f1a',
-  'red': '#e3342f',
+  red: '#e3342f',
   'red-light': '#ef5753',
   'red-lighter': '#f9acaa',
   'red-lightest': '#fcebea',
 
-  'orange-darkest': '#542605',
-  'orange-darker': '#7f4012',
+  'orange-darkest': '#462a16',
+  'orange-darker': '#613b1f',
   'orange-dark': '#de751f',
-  'orange': '#f6993f',
+  orange: '#f6993f',
   'orange-light': '#faad63',
   'orange-lighter': '#fcd9b6',
   'orange-lightest': '#fff5eb',
@@ -73,31 +73,31 @@ var colors = {
   'yellow-darkest': '#453411',
   'yellow-darker': '#684f1d',
   'yellow-dark': '#f2d024',
-  'yellow': '#ffed4a',
+  yellow: '#ffed4a',
   'yellow-light': '#fff382',
   'yellow-lighter': '#fff9c2',
   'yellow-lightest': '#fcfbeb',
 
-  'green-darkest': '#032d19',
-  'green-darker': '#0b4228',
+  'green-darkest': '#0f2f21',
+  'green-darker': '#1a4731',
   'green-dark': '#1f9d55',
-  'green': '#38c172',
+  green: '#38c172',
   'green-light': '#51d88a',
   'green-lighter': '#a2f5bf',
   'green-lightest': '#e3fcec',
 
   'teal-darkest': '#0d3331',
-  'teal-darker': '#174e4b',
+  'teal-darker': '#20504f',
   'teal-dark': '#38a89d',
-  'teal': '#4dc0b5',
+  teal: '#4dc0b5',
   'teal-light': '#64d5ca',
   'teal-lighter': '#a0f0ed',
   'teal-lightest': '#e8fffe',
 
-  'blue-darkest': '#05233b',
-  'blue-darker': '#103d60',
+  'blue-darkest': '#12283a',
+  'blue-darker': '#1c3d5a',
   'blue-dark': '#2779bd',
-  'blue': '#3490dc',
+  blue: '#3490dc',
   'blue-light': '#6cb2eb',
   'blue-lighter': '#bcdefa',
   'blue-lightest': '#eff8ff',
@@ -105,30 +105,29 @@ var colors = {
   'indigo-darkest': '#191e38',
   'indigo-darker': '#2f365f',
   'indigo-dark': '#5661b3',
-  'indigo': '#6574cd',
+  indigo: '#6574cd',
   'indigo-light': '#7886d7',
   'indigo-lighter': '#b2b7ff',
   'indigo-lightest': '#e6e8ff',
 
-  'purple-darkest': '#1f133f',
-  'purple-darker': '#352465',
+  'purple-darkest': '#21183c',
+  'purple-darker': '#382b5f',
   'purple-dark': '#794acf',
-  'purple': '#9561e2',
+  purple: '#9561e2',
   'purple-light': '#a779e9',
   'purple-lighter': '#d6bbfc',
   'purple-lightest': '#f3ebff',
 
-  'pink-darkest': '#45051e',
-  'pink-darker': '#72173a',
+  'pink-darkest': '#451225',
+  'pink-darker': '#6f213f',
   'pink-dark': '#eb5286',
-  'pink': '#f66d9b',
+  pink: '#f66d9b',
   'pink-light': '#fa7ea8',
   'pink-lighter': '#ffbbca',
   'pink-lightest': '#ffebef'
 }
 
 module.exports = {
-
   /*
   |-----------------------------------------------------------------------------
   | Colors                                  https://tailwindcss.com/docs/colors
@@ -164,10 +163,10 @@ module.exports = {
   */
 
   screens: {
-    'sm': '576px',
-    'md': '768px',
-    'lg': '992px',
-    'xl': '1200px'
+    sm: '576px',
+    md: '768px',
+    lg: '992px',
+    xl: '1200px'
   },
 
   /*
@@ -189,9 +188,10 @@ module.exports = {
   */
 
   fonts: {
-    'sans': [
-      '-apple-system',
+    sans: [
+      'system-ui',
       'BlinkMacSystemFont',
+      '-apple-system',
       'Segoe UI',
       'Roboto',
       'Oxygen',
@@ -202,7 +202,7 @@ module.exports = {
       'Helvetica Neue',
       'sans-serif'
     ],
-    'serif': [
+    serif: [
       'Constantia',
       'Lucida Bright',
       'Lucidabright',
@@ -214,7 +214,7 @@ module.exports = {
       'Georgia',
       'serif'
     ],
-    'mono': [
+    mono: [
       'Menlo',
       'Monaco',
       'Consolas',
@@ -244,11 +244,11 @@ module.exports = {
   */
 
   textSizes: {
-    'xs': '.75rem', // 12px
-    'sm': '.875rem', // 14px
-    'base': '1rem', // 16px
-    'lg': '1.125rem', // 18px
-    'xl': '1.25rem', // 20px
+    xs: '.75rem', // 12px
+    sm: '.875rem', // 14px
+    base: '1rem', // 16px
+    lg: '1.125rem', // 18px
+    xl: '1.25rem', // 20px
     '2xl': '1.5rem', // 24px
     '3xl': '1.875rem', // 30px
     '4xl': '2.25rem', // 36px
@@ -270,15 +270,15 @@ module.exports = {
   */
 
   fontWeights: {
-    'hairline': 100,
-    'thin': 200,
-    'light': 300,
-    'normal': 400,
-    'medium': 500,
-    'semibold': 600,
-    'bold': 700,
-    'extrabold': 800,
-    'black': 900
+    hairline: 100,
+    thin: 200,
+    light: 300,
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800,
+    black: 900
   },
 
   /*
@@ -294,10 +294,10 @@ module.exports = {
   */
 
   leading: {
-    'none': 1,
-    'tight': 1.25,
-    'normal': 1.5,
-    'loose': 2
+    none: 1,
+    tight: 1.25,
+    normal: 1.5,
+    loose: 2
   },
 
   /*
@@ -313,9 +313,9 @@ module.exports = {
   */
 
   tracking: {
-    'tight': '-0.05em',
-    'normal': '0',
-    'wide': '0.05em'
+    tight: '-0.05em',
+    normal: '0',
+    wide: '0.05em'
   },
 
   /*
@@ -348,6 +348,25 @@ 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
@@ -386,7 +405,7 @@ module.exports = {
   |
   */
 
-  borderColors: Object.assign({ default: colors['grey-light'] }, colors),
+  borderColors: global.Object.assign({ default: colors['grey-light'] }, colors),
 
   /*
   |-----------------------------------------------------------------------------
@@ -405,11 +424,11 @@ module.exports = {
   */
 
   borderRadius: {
-    'none': '0',
-    'sm': '.125rem',
+    none: '0',
+    sm: '.125rem',
     default: '.25rem',
-    'lg': '.5rem',
-    'full': '9999px'
+    lg: '.5rem',
+    full: '9999px'
   },
 
   /*
@@ -433,12 +452,13 @@ module.exports = {
   */
 
   width: {
-    'auto': 'auto',
-    'px': '1px',
+    auto: 'auto',
+    px: '1px',
     '1': '0.25rem',
     '2': '0.5rem',
     '3': '0.75rem',
     '4': '1rem',
+    '5': '1.25rem',
     '6': '1.5rem',
     '8': '2rem',
     '10': '2.5rem',
@@ -459,8 +479,8 @@ module.exports = {
     '4/5': '80%',
     '1/6': '16.66667%',
     '5/6': '83.33333%',
-    'full': '100%',
-    'screen': '100vw'
+    full: '100%',
+    screen: '100vw'
   },
 
   /*
@@ -479,12 +499,13 @@ module.exports = {
   */
 
   height: {
-    'auto': 'auto',
-    'px': '1px',
+    auto: 'auto',
+    px: '1px',
     '1': '0.25rem',
     '2': '0.5rem',
     '3': '0.75rem',
     '4': '1rem',
+    '5': '1.25rem',
     '6': '1.5rem',
     '8': '2rem',
     '10': '2.5rem',
@@ -494,8 +515,8 @@ module.exports = {
     '32': '8rem',
     '48': '12rem',
     '64': '16rem',
-    'full': '100%',
-    'screen': '100vh'
+    full: '100%',
+    screen: '100vh'
   },
 
   /*
@@ -514,7 +535,7 @@ module.exports = {
 
   minWidth: {
     '0': '0',
-    'full': '100%'
+    full: '100%'
   },
 
   /*
@@ -533,8 +554,8 @@ module.exports = {
 
   minHeight: {
     '0': '0',
-    'full': '100%',
-    'screen': '100vh'
+    full: '100%',
+    screen: '100vh'
   },
 
   /*
@@ -553,16 +574,16 @@ module.exports = {
   */
 
   maxWidth: {
-    'xs': '20rem',
-    'sm': '30rem',
-    'md': '40rem',
-    'lg': '50rem',
-    'xl': '60rem',
+    xs: '20rem',
+    sm: '30rem',
+    md: '40rem',
+    lg: '50rem',
+    xl: '60rem',
     '2xl': '70rem',
     '3xl': '80rem',
     '4xl': '90rem',
     '5xl': '100rem',
-    'full': '100%'
+    full: '100%'
   },
 
   /*
@@ -580,8 +601,8 @@ module.exports = {
   */
 
   maxHeight: {
-    'full': '100%',
-    'screen': '100vh'
+    full: '100%',
+    screen: '100vh'
   },
 
   /*
@@ -600,14 +621,21 @@ module.exports = {
   */
 
   padding: {
-    'px': '1px',
+    px: '1px',
     '0': '0',
     '1': '0.25rem',
     '2': '0.5rem',
     '3': '0.75rem',
     '4': '1rem',
+    '5': '1.25rem',
     '6': '1.5rem',
-    '8': '2rem'
+    '8': '2rem',
+    '10': '2.5rem',
+    '12': '3rem',
+    '16': '4rem',
+    '20': '5rem',
+    '24': '6rem',
+    '32': '8rem'
   },
 
   /*
@@ -626,15 +654,22 @@ module.exports = {
   */
 
   margin: {
-    'auto': 'auto',
-    'px': '1px',
+    auto: 'auto',
+    px: '1px',
     '0': '0',
     '1': '0.25rem',
     '2': '0.5rem',
     '3': '0.75rem',
     '4': '1rem',
+    '5': '1.25rem',
     '6': '1.5rem',
-    '8': '2rem'
+    '8': '2rem',
+    '10': '2.5rem',
+    '12': '3rem',
+    '16': '4rem',
+    '20': '5rem',
+    '24': '6rem',
+    '32': '8rem'
   },
 
   /*
@@ -653,14 +688,21 @@ module.exports = {
   */
 
   negativeMargin: {
-    'px': '1px',
+    px: '1px',
     '0': '0',
     '1': '0.25rem',
     '2': '0.5rem',
     '3': '0.75rem',
     '4': '1rem',
+    '5': '1.25rem',
     '6': '1.5rem',
-    '8': '2rem'
+    '8': '2rem',
+    '10': '2.5rem',
+    '12': '3rem',
+    '16': '4rem',
+    '20': '5rem',
+    '24': '6rem',
+    '32': '8rem'
   },
 
   /*
@@ -681,10 +723,11 @@ module.exports = {
 
   shadows: {
     default: '0 2px 4px 0 rgba(0,0,0,0.10)',
-    'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
-    'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
-    'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
-    'none': 'none'
+    md: '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
+    lg: '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
+    inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
+    outline: '0 0 0 3px rgba(52,144,220,0.5)',
+    none: 'none'
   },
 
   /*
@@ -701,7 +744,7 @@ module.exports = {
   */
 
   zIndex: {
-    'auto': 'auto',
+    auto: 'auto',
     '0': 0,
     '10': 10,
     '20': 20,
@@ -733,17 +776,144 @@ module.exports = {
 
   /*
   |-----------------------------------------------------------------------------
-  | Options                  https://tailwindcss.com/docs/configuration#options
+  | SVG fill                                   https://tailwindcss.com/docs/svg
   |-----------------------------------------------------------------------------
   |
-  | Here is where you can set your Tailwind configuration options. For more
-  | details about these options, visit the configuration options documentation.
+  | Here is where you define your SVG fill colors. By default we just provide
+  | `fill-current` which sets the fill to the current text color. This lets you
+  | specify a fill color using existing text color utilities and helps keep the
+  | generated CSS file size down.
+  |
+  | Class name: .fill-{name}
+  |
+  */
+
+  svgFill: {
+    current: 'currentColor'
+  },
+
+  /*
+  |-----------------------------------------------------------------------------
+  | SVG stroke                                 https://tailwindcss.com/docs/svg
+  |-----------------------------------------------------------------------------
+  |
+  | Here is where you define your SVG stroke colors. By default we just provide
+  | `stroke-current` which sets the stroke to the current text color. This lets
+  | you specify a stroke color using existing text color utilities and helps
+  | keep the generated CSS file size down.
+  |
+  | Class name: .stroke-{name}
+  |
+  */
+
+  svgStroke: {
+    current: 'currentColor'
+  },
+
+  /*
+  |-----------------------------------------------------------------------------
+  | Modules                  https://tailwindcss.com/docs/configuration#modules
+  |-----------------------------------------------------------------------------
+  |
+  | 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
+  |   - active
+  |   - group-hover
+  |
+  | To disable a module completely, use `false` instead of an array.
+  |
+  */
+
+  modules: {
+    appearance: ['responsive'],
+    backgroundAttachment: ['responsive'],
+    backgroundColors: ['responsive', 'hover', 'focus'],
+    backgroundPosition: ['responsive'],
+    backgroundRepeat: ['responsive'],
+    backgroundSize: ['responsive'],
+    borderCollapse: [],
+    borderColors: ['responsive', 'hover', 'focus'],
+    borderRadius: ['responsive'],
+    borderStyle: ['responsive'],
+    borderWidths: ['responsive'],
+    cursor: ['responsive'],
+    display: ['responsive'],
+    flexbox: ['responsive'],
+    float: ['responsive'],
+    fonts: ['responsive'],
+    fontWeights: ['responsive', 'hover', 'focus'],
+    height: ['responsive'],
+    leading: ['responsive'],
+    lists: ['responsive'],
+    margin: ['responsive'],
+    maxHeight: ['responsive'],
+    maxWidth: ['responsive'],
+    minHeight: ['responsive'],
+    minWidth: ['responsive'],
+    negativeMargin: ['responsive'],
+    opacity: ['responsive'],
+    outline: ['focus'],
+    overflow: ['responsive'],
+    padding: ['responsive'],
+    pointerEvents: ['responsive'],
+    position: ['responsive'],
+    resize: ['responsive'],
+    shadows: ['responsive', 'hover', 'focus'],
+    svgFill: [],
+    svgStroke: [],
+    tableLayout: ['responsive'],
+    textAlign: ['responsive'],
+    textColors: ['responsive', 'hover', 'focus'],
+    textSizes: ['responsive'],
+    textStyle: ['responsive', 'hover', 'focus'],
+    tracking: ['responsive'],
+    userSelect: ['responsive'],
+    verticalAlign: ['responsive'],
+    visibility: ['responsive'],
+    whitespace: ['responsive'],
+    width: ['responsive'],
+    zIndex: ['responsive']
+  },
+
+  /*
+  |-----------------------------------------------------------------------------
+  | 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
+  |-----------------------------------------------------------------------------
+  |
+  | Here is where you can tweak advanced configuration options. We recommend
+  | leaving these options alone unless you absolutely need to change them.
   |
   */
 
   options: {
     prefix: '',
-    important: false
+    important: false,
+    separator: ':'
   }
-
 }