+const links = [
+ { href: 'https://github.com/zeit/next.js', label: 'Github' },
+ { href: 'https://nextjs.org/docs', label: 'Docs' }
+]
+
+export default function Nav () {
+ return
-)
-
-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 (
+
+
+
+ )
+ }
+}
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 (
-
-
-
-
-
- {this.props.customValue}
-
-
-
-
- )
- }
-}
-
-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 () => (
-
Next.js + Tailwind css
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: ':'
}
-
}