How to add Tailwind CSS 3 and its official plugins to your Vue.js 3 project

Adding Tailwind CSS 3 to your Vue.js 3 project is a pretty straightforward process. Let's get started and create a brand new project by running the following command in our terminal:

> npm init vue@latest

This will install and execute the official scaffolding which uses Vite under the hood and provides a super fast development environment. You will be presented with various optional features to choose from based on your needs.

After the installation completes, you will have to navigate to its folder and install all required npm dependencies:

> cd <project-name>
> npm install

Let's add Tailwind CSS and required config files

To use Tailwind CSS, we need the framework itself, PostCSS and Autoprefixer:

> npm install -D tailwindcss postcss autoprefixer

Moreover, we have to create a Tailwind CSS config file along with the required PostCSS config file. We can easily add them by running the following command:

> npx tailwindcss init -p

2 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 and we don't have to make any changes there.

Even if we don't want to alter framework's options, we have to specify in which files we are going to use Tailwind CSS classes, so that the framework can grab them and generate the styles for us. To do that, we need to add the appropriate paths in tailwind.config.js file:

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add Tailwind directives to your CSS

The next step is to add the required directives in our CSS file. This is where our styles will be injected. To do this, we can create a new ./assets/main.css file and add the following @tailwind directives:

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

Afterwards, let's also include our stylesheet file 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')

Installing the official plugins

There are currently 4 official plugins which add various features to the framework and should come in handy in many cases. To add them in our project, we can easily install them through npm…

> npm install -D @tailwindcss/typography @tailwindcss/forms @tailwindcss/line-clamp @tailwindcss/aspect-ratio

…and register them in tailwind.config.js file:

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/line-clamp'),
    require('@tailwindcss/aspect-ratio'),
  ]
}

You are ready!

If everything went according to plan, then you should have integrated Tailwind CSS 3 in your Vue.js 3 project using Vite successfully and have all of its official plugins available.

You can start your development server…

> npm run dev

..and use Tailwind CSS classes in your files. 

Happy coding!