Update Next.js example

Author: adamwathan

examples/nextjs/README.md

@@ -18,21 +18,27 @@ module.exports = {
 }
 ```
 
-Next, create a CSS file in your `static` folder for your Tailwind styles. We've used `static/css/tailwind.css` for this example:
+Next, create a CSS file for your Tailwind styles. We've used `css/tailwind.css` for this example:
 
 ```css
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 ```
 
-Finally, import your CSS in your main layout component. Here we're using `components/Layout.js`:
+Finally, import your CSS in your `_app.js` component to make them available globally:
 
 ```jsx
-import '../static/css/tailwind.css'
+import React from 'react'
+import App from 'next/app'
+import '../css/tailwind.css'
+
+class MyApp extends App {
+  render() {
+    const { Component, pageProps } = this.props
+    return <Component {...pageProps} />
+  }
+}
 
-export default ({ children }) => (
-  <div>
-    // ...
-  </div>
-)
+export default MyApp
+```

examples/nextjs/components/Layout.jsx

@@ -1,5 +1,3 @@
-import '../static/css/tailwind.css'
-
 export default ({ children }) => {
   return (
     <div className="antialiased text-gray-900 flex items-center justify-center min-h-screen">

examples/nextjs/static/css/tailwind.css renamed to examples/nextjs/css/tailwind.css

@@ -0,0 +1,12 @@
+import React from 'react'
+import App from 'next/app'
+import '../css/tailwind.css'
+
+class MyApp extends App {
+  render() {
+    const { Component, pageProps } = this.props
+    return <Component {...pageProps} />
+  }
+}
+
+export default MyApp