Update for Vue CLI 3

Note:

- Switches from you ExtractTextWebpackPlugin to MiniCSSExtractPlugin.
- Requires Tailwind’s expiremental shadowLookup flag to be enabled hello-world component loading

Author: chasegiunta

README.md

@@ -1,6 +1,5 @@
-# craft-vue
-
-All the power of a Vue CLI's scaffolding & single file components tailored for a Craft CMS project.
+# craft-vue-tailwind
+Fork of the [craft-vue](https://github.com/chasegiunta/craft-vue) template that integrates the Tailwind CSS utility framework & removes unused CSS with Purgecss.
 
 ## What's Included
 
@@ -17,6 +16,7 @@ All the power of a Vue CLI's scaffolding & single file components tailored for a
   - Babel compiling
   - CSS across all components extracted into a single file and minified with [cssnano](https://github.com/ben-eb/cssnano)
   - Static assets compiled with version hashes for efficient long-term caching
+  - Removes unused CSS with Purgecss. Includes whitelister to keep third-party libraries untouched.
   - Bundle size analytics
 
 ### Fork It And Make Your Own
@@ -42,6 +42,15 @@ composer create-project chasegiunta/craft-vue PATH
 # install dependencies
 npm install # yarn
 
+# initialize Tailwind's config file (tailwind.js)
+./node_modules/.bin/tailwind init
+
+# append shadowLookup experiment flag to end of tailwind.js file
+# (this step will be removed in an upcoming release)
+experiments: {
+    shadowLookup: true,
+}
+
 # run dev server (default runs on localhost:8080)
 npm run dev # yarn dev (alias for 'yarn serve')
 
@@ -59,6 +68,10 @@ After running `npm run build`, the easiest way to test your build files locally
 
 For a detailed explanation on how things work, check out the [Vue CLI docs](https://cli.vuejs.org/).
 
+## Tailwind directives in .vue files
+
+Using Tailwind directives (@apply, etc.) inside of Vue's single file components is now possible with the addition of an expirimental `shadowLookup` flag enabled in your tailwind.js file (added in Tailwind v0.6.2 - hooray!).
+
 ## Pre-Processors
 
 This boilerplate has pre-configured CSS extraction for most popular CSS pre-processors including LESS, SASS, Stylus, and PostCSS. To use a pre-processor, all you need to do is install the appropriate webpack loader for it. For example, to use SASS:

package.json

@@ -8,16 +8,24 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "postcss-import": "^12.0.0",
+    "tailwindcss": "^0.6.4",
     "vue": "^2.5.16"
   },
   "devDependencies": {
     "@vue/cli-service": "^3.0.0-rc.10",
+    "glob-all": "^3.1.0",
+    "mini-css-extract-plugin": "^0.4.1",
+    "purgecss-webpack-plugin": "^1.2.0",
+    "purgecss-whitelister": "^2.1.0",
     "sane": "^3.0.0",
     "vue-template-compiler": "^2.5.16",
     "webpack-manifest-plugin": "^2.0.3"
   },
   "postcss": {
     "plugins": {
+      "postcss-import": {},
+      "tailwindcss": "./tailwind.js",
       "autoprefixer": {}
     }
   },

src/app.css

@@ -1,8 +1,19 @@
+@tailwind preflight;
+@tailwind components;
+
+/**
+ * Here you would add any of your custom classes; stuff that you'd
+ * want loaded *before* the utilities so that the utilities could still
+ * override them.
+ */
+
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
   margin-top: 60px;
-}
+}
+
+@tailwind utilities;

src/components/HelloWorld.vue

@@ -1,15 +1,24 @@
 <template>
   <div class="hello">
     <img src="/assets/logo.png">
-    <h1>{{ msg }}</h1>
-    <p>You're viewing the <code>&#060;HelloWorld&#062;</code> component!</p>
+    <h1 class="mb-4">{{ msg }}</h1>
+    <p class="mb-3">You're viewing the <code>&#060;HelloWorld&#062;</code> component!</p>
+    <p class="mb-3">If this text is white, you've successfully installed Tailwind!</p>
 
-    <p>Passing in some data from twig:</p>
-    <code>
-      Craft Version: {{ info.craftVersion }} (passed in as prop)<br>
-      Environment: {{ info.environment }} (passed in as prop)<br>
-      DB Name: <slot></slot> (passed in through slot)
-    </code>
+    <p class="mb-3">Passing in some data from twig:</p>
+
+    <div class="mt-3 p-4 inline-block rounded-lg leading-loose bg-black text-left">
+      <code class="text-grey">
+        <span class="text-white">Craft Version: </span>
+        <span class="text-green-light">{{ info.craftVersion }}</span> (passed in as prop)<br>
+
+        <span class="text-white">Environment: </span>
+        <span class="text-green-light">{{ info.environment }}</span> (passed in as prop)<br>
+
+        <span class="text-white">DB Name: </span>
+        <span class="text-green-light"><slot></slot></span> (passed in through slot)
+      </code>
+    </div>
   </div>
 </template>
 
@@ -27,6 +36,9 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+.hello {
+  @apply text-white
+}
 h1, h2 {
   font-weight: normal;
 }

templates/index.twig

@@ -11,7 +11,7 @@
   {% endif %}
 </head>
 
-<body>
+<body class="bg-grey-darkest">
   <div id="app">
     {% set info = {
       craftVersion: craft.app.getVersion(),

vue.config.js

@@ -1,11 +1,34 @@
 const path = require('path')
 const ManifestPlugin = require('webpack-manifest-plugin')
+const PurgecssPlugin = require('purgecss-webpack-plugin')
+const MiniCssExtractPlugin = require("mini-css-extract-plugin")
+const whitelister = require('purgecss-whitelister')
+const glob = require('glob-all')
+
 
 config = {
   https: false,
   host: 'localhost',
   port: 8080,
-  watchDir: 'templates' 
+  watchDir: 'templates',
+  // Whitelist selectors to stop purgecss from removing them from your CSS
+  // You can pass in whole stylesheets to whitelist everything from thirdparty libs
+  // Accepts string paths, array of strings, globby strings, or array of globby strings:
+  // ['./node_modules/lib1/*.css', './node_modules/lib2/*.scss']
+  purgecssWhitelist: [],
+  // Whitelist based on a regular expression.
+  // Ex: [/red$/] (selectors ending in 'red' will remain)
+  // https://www.purgecss.com/whitelisting
+  purgecssWhitelistPatterns: [],
+}
+
+// Custom PurgeCSS extractor for Tailwind that allows special characters in
+// class names.
+// https://github.com/FullHuman/purgecss#extractor
+class TailwindExtractor {
+  static extract(content) {
+    return content.match(/[A-z0-9-:\/]+/g) || [];
+  }
 }
 
 module.exports = {
@@ -34,6 +57,24 @@ module.exports = {
     plugins: [
       new ManifestPlugin({
         publicPath: '/dist/'
+      }),
+      new MiniCssExtractPlugin({
+        filename: 'css/[name].[contenthash].css'
+      }),
+      new PurgecssPlugin({
+        paths: glob.sync([
+          path.join(__dirname, './templates/**/*.html'),
+          path.join(__dirname, './templates/**/*.twig'),
+          path.join(__dirname, './src/**/*.vue'),
+          path.join(__dirname, './src/**/*.js')
+        ]),
+        whitelist: whitelister(config.purgecssWhitelist),
+        whitelistPatterns: config.purgecssWhitelistPatterns,
+        extractors: [{
+          extractor: TailwindExtractor,
+          // Specify the file extensions to include when scanning for class names.
+          extensions: ["html", "js", "twig", "vue"]
+        }]
       })
     ]
   },