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
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
In last run project
npm run serve
Read Also
Vue 3 Dark Mode with Tailwind CSS Example
Install Vite + Vue 3 + Typescript + Tailwind CSS 3
How to Install Tailwind CSS in Vue 3
Vue 3 Responsive Navbar Menu With Tailwind CSS Example
