How to Install Tailwind CSS in Vue 3

Toady, we will install tailwind css in vue3. for this section we will use vue cli & vue cli tailwind css plugin. why we use vue cli tailwind css plugin, it is simple and easy to install also it come with Tailwind configuration and PostCSS. That mean we don't worry about configuration. so let see the process.


How to Install Tailwind CSS 2 in Vue 3


Step 1 : Create Vue 3 Project

Step 2 : Install Tailwind CSS with Vue CLI

Step 3 : Import Tailwind CSS on Vue file


Step 1 : Create Vue 3 Project

First we need to create vue project.

vue create my-project  

Select Vue 3 congratulation.

Vue CLI v4.5.13
? Please pick a preset: (Use arrow keys)
❯ s ([Vue 3] babel, router, eslint) 
 Default ([Vue 2] babel, eslint) 
 Default (Vue 3) ([Vue 3] babel, eslint) 
 Manually select features 

Go to the project directory.

cd my-project


Step 2 : Install Tailwind CSS with Vue CLI

We need to install vue-cli plugin for Tailwind CSS. This plugin including installing Tailwind, and configuring PostCSS for us.

run below command for install tailwind css.

vue add tailwind

After you can see minimal and full configure, chose for one of us for your requirements

✔ Successfully installed plugin: vue-cli-plugin-tailwind
? Generate tailwind.config.js (Use arrow keys)
❯ minimal 
 full 
 Tailwind CSS in Vue 3 folder

Tailwind CSS in Vue 3 folder


Step 3 : Import Tailwind CSS on Vue file

Next, you need to import '@/assets/tailwind.css'; on vue file. you can easy put in root file or you can test another file.

Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <div>
      <h2 class="text-2xl font-bold text-blue-800">
        how to start your project with tailwind css & Vue 3
      </h2>  
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue';
// import '../assets/tailwind.css';
import '@/assets/tailwind.css';

export default {
  name: 'Home',
  components: {
    HelloWorld,
  },
};
</script>

In last serve the project

npm run serve


How to install Tailwind CSS v3 in Vue 3

In mid december 2021 tailwind css 3 official launch. Tailwind CSS v3 installation & setup in vue 3 is now much easier than tailwind css 2, lets start.

Read Also : Tailwind CSS v3 starter kit with vue 3 


Create Vue Project

 vue create tailwind-v3 


Choose setup Vue 3

Vue CLI v4.5.15
? Please pick a preset: (Use arrow keys)
❯ s ([Vue 3] babel, router, eslint) 
 a ([Vue 3] babel, typescript, router, vuex, eslint) 
 Default ([Vue 2] babel, eslint) 
 Default (Vue 3) ([Vue 3] babel, eslint) 
 Manually select features


Next, move to project

 $ cd tailwind-v3
 $ npm run serve


Install Tailwind CSS v3

npm install -D tailwindcss postcss autoprefixer


Run below command to create tailwind v3 config file.

npx tailwindcss init -p


Now, you need to setup tailwind.config.js template path

Note: if you are using vite then follow tailwind.config.js below.

tailwind.config.js with vite

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


Note: if you are not using vite then follow tailwind.config.js below.

tailwind.config.js

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


Create index.css file and put @tailwind directives for each of Tailwind’s layers.

/src/index.css

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


Set path index.css in main.js.

/src/main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import './index.css'

createApp(App).use(router).mount("#app");


/src/views/Home.vue

<template>
  <div>
  <h1 class="mb-4 text-3xl font-bold text-blue-600 underline">
    Tailwind CSS 3 with vue js 3
  </h1>
  <button class="px-6 py-2 text-sm text-green-100 bg-indigo-600 rounded">Next</button>
  </div>
</template>
tailwind v3 with vue 3

tailwind v3 with vue 3


In last run project

npm run serve