Update README

Author: Brandon Pittman

examples/gridsome/README.md

@@ -1,106 +1,28 @@
-# gridsome
+# Gridsome
 
 If you don't have an existing Gridsome project, check out their docs on how to get started.
 
-Once you have a Gridsome site, install Tailwind by running this in the root of the project:
+This plugin makes use of the gridsome-plugin-tailwindcss plugin to add
+*Tailwind*, *PurgeCSS*, *postcss-preset-env*, and *postcss-import* to your build chain.
+It includes both *gridsome-plugin-tailwindcss* and the regular *tailwindcss* so
+that you can write your own plugins and access the default config in
+`tailwind.config.js`.
 
-```
-npm install tailwindcss
-```
-
-More than likely, you want to use PurgeCSS as well, so let's install that too:
-
-```
-npm install @fullhuman/postcss-purgecss
-```
-
-Next, initialize your Tailwind config:
-
-```
-./node_modules/.bin/tailwind init
-```
-
-Then in `gridsome.config.js`, require Tailwind and add it as a PostCSS plugin, as well as our PurgeCSS config:
+This best way to get going is to add this line to import Tailwind's directives in `src/main.js`:
 
 ```js
-// gridsome.config.js
-const purgecss = require('@fullhuman/postcss-purgecss')
-const tailwind = require('tailwindcss')
-
-const postcssPlugins = [
-  tailwind('./tailwind.config.js'),
-]
-
-// add purgecss only when building for production
-if (process.env.NODE_ENV === 'production') postcssPlugins.push(purgecss())
-
-module.exports = {
-  css: {
-    loaderOptions: {
-      postcss: {
-        plugins: postcssPlugins,
-      },
-    },
-  },
-}
+import 'tailwindcss/tailwind.css'
 ```
 
-Now let's create a `purgecss.config.js` file to define some options for PurgeCSS:
-
-```js
-// purgecss.config.js
-
-class TailwindExtractor {
-  static extract(content) {
-    return content.match(/[A-z0-9-:\\/]+/g)
-  }
-}
-
-module.exports = {
-  content: [
-    './src/**/*.vue',
-    './src/**/*.js',
-    './src/**/*.jsx',
-    './src/**/*.html',
-    './src/**/*.pug',
-    './src/**/*.md',
-  ],
-  whitelist: [
-    'body',
-    'html',
-    'img',
-    'a',
-    'g-image',
-    'g-image--lazy',
-    'g-image--loaded',
-  ],
-  extractors: [
-    {
-      extractor: TailwindExtractor,
-      extensions: ['vue', 'js', 'jsx', 'md', 'html', 'pug'],
-    },
-  ],
-}
-```
+It's recommended to use `tailwind.config.js` to add [global base styles](https://tailwindcss.com/docs/adding-base-styles#using-a-plugin),
+components, utilities instead of adding them in CSS files.
 
-Next up, we'll create a file at `src/assets/tailwind.css`:
+Or add the directives somewhere in your CSS.
 
 ```css
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 ```
 
-Finally, we'll import that into our `src/main.js` file:
-
-```js
-import DefaultLayout from '~/layouts/Default.vue'
-import '~/assets/tailwind.css'
-
-export default function (Vue, { router, head, isClient }) {
-  // Set default layout as a global component
-  Vue.component('Layout', DefaultLayout)
-}
-```
-
-Now you should be all set to start using Tailwind and PurgeCSS in your Gridsome project!
+Now you should be all set to start using Tailwind, postcss-preset-env, postcss-import, and PurgeCSS in your Gridsome project!

examples/gridsome/tailwind.config.js

@@ -1,7 +1,9 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+
 module.exports = {
   theme: {
-    extend: {}
+    extend: {},
   },
   variants: {},
-  plugins: []
+  plugins: [],
 }