Merge pull request #14 from brandonpittman/master

Use plugin

Author: adamwathan

examples/gridsome/README.md

@@ -1,106 +1,18 @@
-# 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
-```
+The plugin adds Tailwind directives under the hood using Gridsome's Client API
+so Tailwind works out-of-the-box, requiring no further declaration of Tailwind
+directives.
 
-More than likely, you want to use PurgeCSS as well, so let's install that too:
+It's recommended to use `tailwind.config.js` to add [global base styles](https://tailwindcss.com/docs/adding-base-styles#using-a-plugin),
+components, and utilities instead of adding them in CSS files.
 
-```
-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:
-
-```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,
-      },
-    },
-  },
-}
-```
-
-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'],
-    },
-  ],
-}
-```
-
-Next up, we'll create a file at `src/assets/tailwind.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/gridsome.config.js

@@ -1,20 +1,9 @@
-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 = {
   siteName: 'Gridsome Tailwind Setup',
-  css: {
-    loaderOptions: {
-      postcss: {
-        plugins: postcssPlugins,
-      },
+  plugins: [
+    {
+      use: 'gridsome-plugin-tailwindcss',
     },
-  },
-}
+  ],
+}
+

examples/gridsome/package.json

@@ -7,8 +7,7 @@
     "explore": "gridsome explore"
   },
   "dependencies": {
-    "@fullhuman/postcss-purgecss": "^1.2.0",
-    "gridsome": "^0.6.0",
-    "tailwindcss": "^1.0.3"
+    "gridsome": "latest",
+    "gridsome-plugin-tailwindcss": "latest"
   }
 }

examples/gridsome/purgecss.config.js

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