How to use Tailwind CSS in your Vue.js project

Adding Tailwind CSS 2 to your Vue.js project is a simple process and it's the same for both Vue.js 2 and 3 versions. First of all, you need to have a Vue project ready, so be sure to check out Vue CLI for easy scaffolding. We use it to create a fresh Vue.js 3 app for our demonstration.

Install required dependencies and add config files

To use Tailwind CSS, we need the framework itself, PostCSS and Autoprefixer. The thing is that Vue.js uses an older PostCSS version (7) at the moment, so we have to install the compatible packages for Tailwind CSS which by default uses the latest 8 version. We can install them by running the following command:

> npm i -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Moreover, let's create a boilerplate Tailwind CSS config file and the required PostCSS config file by running the following command:

> npx tailwindcss init -p

A couple of configuration files will be created: tailwind.config.js and postcss.config.js. In the first one we can alter default framework options or extend it. In the second, Tailwind CSS and Autoprefixer are added as PostCSS plugins.

Add Tailwind styles in your CSS

The next step is to add the default CSS styles provided by the framework. To do this, we can create a new ./assets/main.css file where we can use the custom @tailwind directive:

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

Afterwards, let's also include it in our ./src/main.js by importing it as follows:

import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'

createApp(App).mount('#app')

Configure PurgeCSS

Finally, configuring PurgeCSS functionality is important because it can help us minimize our CSS size by only including vital CSS styles based on the ones we are using in our HTML markup.

To enable it, we just need to tell it to check out the files in which we use Tailwind CSS classes when we run the npm run build command. This can be easily done by adding the following item in the purge array, in our tailwind.config.js file:

// ...

purge: [
  './public/index.html',
  './src/**/*.{js,vue}',
]

// ...

You are ready!

If everything went according to plan, then you should have integrated Tailwind CSS in your Vue.js project successfully. Happy coding!