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 the 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')