“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

vue-cli

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 --version
3.0.1 <-- YAY!!!

Start the project

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

Let’s DIY

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.

We are going to tweak some config later

Now…run

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

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.

Basic tailwind installation

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.

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!

Chain the tailwind build process with the vue build process

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
        }),
    ]
};

Try it out

use some tailwind class on the App.vue

<template>
    <div id="app">
        <div class="h-screen w-screen bg-red"></div>
    </div>
</template>

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

Install purge

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

npm i -D purgecss @fullhuman/postcss-purgecss

Chain to postcss

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

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!