Install tailwind in Vue 3 project

Introduction

Tailwindcss is a utility-first CSS framework that can be composed to build any design, directly in your markup.

This is a quick tutorial to show how tailwind can be configured in a fresh Vue 3 application.

Create new Vue app

Assuming npm is installed, make sure you have the vue cli installed too:

npm install -g @vue/cli

Next, create a new vue project using the vue cli command:

vue create vue3-tailwind

Select the Vue 3 option when prompted. You can also chose Vue 2 as tailwindcss can be installed in the same way.

Now cd into the project and run npm run serve the output from the command shows me where my project is running:

When I visit the link http://localhost:8081 I can see the default starter page:

Install & configure tailwind

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Note: As of v2.0, Tailwind CSS depends on PostCSS 8. Because PostCSS 8 is only a few months old, many other tools in the ecosystem haven’t updated yet, which means you might see an error like this in your terminal after installing Tailwind and trying to compile your CSS:

Error: PostCSS plugin tailwindcss requires PostCSS 8.

To help bridge the gap until everyone has updated, a PostCSS 7 compatibility build is published under the compat channel on npm.

If you run into the error mentioned above, uninstall Tailwind and re-install using the compatibility build instead:

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

The compatibility build is identical to the main build in every way, so you aren’t missing out on any features or anything like that.

You should see a new file postcss.config.js in the project root:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

It should also create a new file tailwind.config.js in the project root:

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

I have configured the purge configuration above to remove unused styles in production.

Create a file if it doesn’t already exist at ./src/index.css and add the following:

/* ./src/index.css */
/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;

Import this file in the main.js file:

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')

That should be all the necessary configuration for tailwind in a Vue 3 application. To test this was working I added the tailwind class class="text-red-500" to an html element to make it show as red.