Image for post
Image for post
“turned on gray laptop computer” by Luca Bravo on Unsplash

Setting up a vue-cli 3 app with tailwindcss and purgecss

In this tutorial I will try to explain my workflow for setting up a VueJs app, using the super useful tailwindcss library and the to wipe out all the unused class in order to reduce the css file size with purgecss.

Vue

The first thing to do is to start the Vue app, I will use the vue-cli which has been released on August 2018.

So we are going to install the cli. Grab and install it via npm (or yarn)

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Now we can check if everything has worked out.

vue --version3.0.1 <-- YAY!!!

Let’s move on and create the project

vue create vue-tailwind-purge

Follow the instruction and select the features that you want in your app, for this demo I will go light and choose only babel.

Follow me as I install everything

Image for post
Image for post
Let’s DIY
Image for post
Image for post
Like it minimal

The next is going to be important, i prefer to place the config files in dedicate files so it is going to be easier to understand them in the future.

Image for post
Image for post
We are going to tweak some config later

And we are done, the vue project is now live. Just follow the instruction to see what you have done.

$ cd vue-tailwind-purge
$ npm run serve
Image for post
Image for post
Wow… I’m good

We have a fully functional vue project, take a rest now because the next one is going to be wild.

Tailwindcss

And we’re back, let’s tackle the tailwind css part.

Install it via npm

npm i -D tailwindcss

Init tailwind via cli

.\node_modules\.bin\tailwind init #windows systems./node_modules/.bin/tailwind init #unix systems

This will create a tailwind.js file, now let’s create a `main.css` file as described in the docs and populate it with the template.

Image for post
Image for post
VSCode is damn good
@tailwind preflight;@tailwind components;@tailwind utilities;

Include main.css in main.js

import "./main.css";

And we are done… well… Almost!

Ohhh finally we are going to tweak the configs, grab your postcss.config.js and add the tailwind plugin.

const tailwindcss = require("tailwindcss");const autoprefixer = require("autoprefixer");module.exports = {    plugins: [        tailwindcss("./tailwind.js"),        autoprefixer({            add: true,            grid: true        }),    ]};

use some tailwind class on the App.vue

<template>    <div id="app">        <div class="h-screen w-screen bg-red"></div>    </div></template>
Image for post
Image for post
Ooooh yes!

So far so good, buuuuut let’s check the bundle size.

npm run build----------
File Size Gzipped
dist\js\chunk-vendors.6c9cb6ef.js 78.56 kb 28.33 kb
dist\js\app.d4938b76.js 4.48 kb 1.61 kb
dist\css\app.fdb66fb0.css 304.01 kb 50.04 kb

Whaaaaaat?
I believe that 304kb of css for a red rectangle are quite big.

Let’s do something to decrease this file size.

Purgecss

We are going to install purge and the purge plugin to work with postcss.

npm i -D purgecss @fullhuman/postcss-purgecss
const tailwindcss = require("tailwindcss");const autoprefixer = require("autoprefixer");const purgecss = require("@fullhuman/postcss-purgecss");module.exports = {    plugins: [        tailwindcss("./tailwind.js"),        autoprefixer({
add: true,
grid: true
}),
//Only add purgecss in production
process.env.NODE_ENV === "production"? purgecss({
content: [
"./src/**/*.html",
"./src/**/*.vue"
]
}): ""
]
};

Ok let’s check the bundle size again

npm run build----------
File Size Gzipped
dist\js\chunk-vendors.6c9cb6ef.js 78.56 kb 28.33 kb
dist\js\app.d4938b76.js 4.48 kb 1.61 kb
dist\css\app.1ed01c7b.css 2.42 kb 0.94 kb

Much better. let’s try and see if something is broken

npm run serve
Image for post
Image for post
Still working

In conclusion

So we have managed to create a vueJs app with the tailwindCss framework wich grant us super speed when designing but without bloating the css thanks to purgeCss, and it wasn’t even so hard.

TL;DR;

Ok I know, i wrote too much, this is my first article and I did carried away, here is a summary of what has to be done

  • Create the app
vue create app-name
  • Install tailwind, purgecss and the purgecss/postcss plugin
npm i -D tailwindcss purgecss @fullhuman/postcss-purgecss
  • Follow the tailwind docs to get tailwind ready [here]
  • Edit the `.postcssrc.js` file to chain everything with the build process as seen above
  • DONE!

Bonus!

As pointed out in the comments there are other ways to accomplish the same result. I personally prefer to keep every configuration in the respective file but if you prefer you can just update your package.json with those lines

“postcss”: {    “plugins”: {        “tailwindcss”: {},        “autoprefixer”: {},        “postcss-purgecss”: {            “content”: [                “./src/**/*.html”,                “./src/**/*.vue”            ]        }    }},

Always remember to check and activate purgecss only in production.

If you have liked this post please give me a round of claps so it will encourage me to write more posts and tutorials.

Thanks for reading!

Written by

Web and Mobile Developer from Italy, chasing simplicity in everything

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store