Merge pull request #50 from emilbryggare/master

Updated example for Next.js 9.2

Author: adamwathan

examples/nextjs/README.md

@@ -1,21 +1,22 @@
 # Next.js
 
-To add Tailwind to a Next project, start by installing `@zeit/next-css`, `tailwindcss`, `postcss-import` and `autoprefixer`:
+To add Tailwind to a Next (^9.2.0) project, start by installing `tailwindcss`, `postcss-import` and `autoprefixer`:
 
 ```sh
-npm install @zeit/next-css tailwindcss postcss-import autoprefixer
+npm install tailwindcss postcss-import autoprefixer --save
 ```
 
 Next, set up your PostCSS plugins by creating a `postcss.config.js` file and adding the following configuration:
 
 ```js
 module.exports = {
   plugins: [
-    require('postcss-import'),
-    require('tailwindcss'),
-    require('autoprefixer'),
+    "postcss-import",
+    "tailwindcss",
+    "autoprefixer"
   ]
-}
+};
+
 ```
 
 Next, create a CSS file for your Tailwind styles. We've used `css/tailwind.css` for this example:
@@ -42,3 +43,32 @@ class MyApp extends App {
 
 export default MyApp
 ```
+## Setting up Purgecss (optional)
+To add Purgecss, start by installing `@fullhuman/postcss-purgecss`. 
+
+```sh
+npm install @fullhuman/postcss-purgecss --save
+```
+
+Finally, add Purgecss to PostCSS plugins by updating the `postcss.config.js` file and adding the following configuration:
+
+```js
+const purgecss = [
+  "@fullhuman/postcss-purgecss",
+  {
+    content: ["./components/**/*.js", "./pages/**/*.js"],
+    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
+  }
+];
+module.exports = {
+  plugins: [
+    "postcss-import",
+    "tailwindcss",
+    "autoprefixer",
+    ...(process.env.NODE_ENV === "production" ? [purgecss] : [])
+  ]
+};
+
+```
+
+[Learn more about using Purgecss with Tailwind here.](https://tailwindcss.com/docs/controlling-file-size#setting-up-purgecss)

examples/nextjs/next.config.js

@@ -7,12 +7,11 @@
   },
   "dependencies": {
     "@fullhuman/postcss-purgecss": "^1.2.0",
-    "@zeit/next-css": "^1.0.1",
-    "autoprefixer": "^9.6.0",
-    "next": "^8.1.0",
+    "autoprefixer": "^9.7.4",
+    "next": "^9.2.0",
     "postcss-import": "^12.0.1",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "tailwindcss": "^1.0.3"
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "tailwindcss": "^1.1.4"
   }
 }

examples/nextjs/package.json

@@ -1,13 +1,15 @@
-const purgecss = require('@fullhuman/postcss-purgecss')({
-  content: ['./components/**/*.js', './pages/**/*.js'],
-  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
-})
-
+const purgecss = [
+  "@fullhuman/postcss-purgecss",
+  {
+    content: ["./components/**/*.js", "./pages/**/*.js"],
+    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
+  }
+];
 module.exports = {
   plugins: [
-    require('postcss-import'),
-    require('tailwindcss'),
-    require('autoprefixer'),
-    ...(process.env.NODE_ENV === 'production' ? [purgecss] : []),
-  ],
-}
+    "postcss-import",
+    "tailwindcss",
+    "autoprefixer",
+    ...(process.env.NODE_ENV === "production" ? [purgecss] : [])
+  ]
+};