Configuring Vue 3 to use TailwindCSS and PurgeCSS

Photo by NordWood Themes on Unsplash

Install Vue cli (if you don’t have):

npm install vue

Create vue project

vue create simple-app

Select the default options

Then enter the folder using the following command:

cd .\simple-app\

TailwindCSS

Install tailwind and configure it:

npm install -D tailwindcss

Create the configuration file by running the following command:

.\node_modules\.bin\tailwind init

This will create a tailwind.config.js file

open the .postcssrc.js file and add tailwindcss as a plugin:

if the .postcssrc.js wasn’t created, open the package.json file and add tailwindcss there:

Then enter the root of the src folder and create a main.css file.

Add the following code in the file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Afterwards, open the main.js and import tailwind into the project.

Lastly run the following command to build the app:

npm run build

Due to tailwindcss’s large size, the build process producess a large minified css file (370KiB).

To mitigate this, we shall use PurgeCSS which removes unused CSS classes. This ends up greatly slimming down the minified CSS file.

PurgeCSS

We shall install the purgecss webpack plugin along with some other dependencies.

npm install -D purgecss-webpack-plugin, path, glob-all

Lastly, create a vue.config.js file that communicates with webpack, and paste in the following:

Now build the project again:

npm run build

Purgecss has managed to reduce the css file from 370kiB to 3.5kiB!

Happy coding 🙂!