added gridsome tailwindcss plugin

noxify · Dec 13, 2019 · 4c3dff6 · 4c3dff6 · vercel · Dec 13, 2019
1 parent e9d5f23
commit 4c3dff6
Show file tree

Hide file tree

Showing 10 changed files with 524 additions and 433 deletions.
diff --git a/gridsome.config.js b/gridsome.config.js
@@ -1,12 +1,19 @@
-class TailwindExtractor {
-  static extract(content) {
-    return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
-  }
-}
-
 module.exports = {
   siteName: 'Gridsome',
+
   plugins: [
+    {
+      use: 'gridsome-plugin-tailwindcss',
+      options: {
+        tailwindConfig: './tailwind.config.js',
+        purgeConfig: {},
+        presetEnvConfig: {},
+        shouldPurge: true,
+        shouldImport: true,
+        shouldTimeTravel: true,
+        shouldPurgeUnusedKeyframes: true,
+      }
+    },
     {
       use: 'gridsome-source-static-meta',
       options: {
@@ -56,38 +63,6 @@ module.exports = {
   chainWebpack: config => {
     config.resolve.alias.set('@modules', '@/resources/js/modules');
     config.resolve.alias.set('@utilities', '@/resources/js/utilities');
-    config.module
-      .rule('css')
-      .oneOf('normal')
-      .use('postcss-loader')
-      .tap(options => {
-        options.plugins.unshift(...[
-          require('postcss-import'),
-          require('postcss-nested'),
-          require('tailwindcss'),
-        ])
-
-        if (process.env.NODE_ENV === 'production') {
-          options.plugins.push(...[
-            require('@fullhuman/postcss-purgecss')({
-              content: [
-                'src/assets/**/*.css',
-                'src/**/*.vue',
-                'src/**/*.js'
-              ],
-              extractors: [
-                {
-                  extractor: TailwindExtractor,
-                  extensions: ['css', 'vue', 'js']
-                }
-              ],
-              whitelistPatterns: [/shiki/]
-            }),
-          ])
-        }
-
-        return options
-      })
-
+
   }
 }