Vue Tailwind Example: In this example, How to integrate tailwind CSS framework in vue application. It also includes how to use the tailwind CSS button in the component
VueJS TailwindCSS Example
- Step 1 Create Vue Application
- Step 2 Start Development Server
- Step 3 Add tailwindcss dependencies
- Step 4 Create tailwind configuration
- Step 5 Create a CSS file and import a CSS file
- Step 4 Add tailwind CSS styles
- Step 5 Add button to Vue component.
- Step 6: Test Vue Application
Create New Vue application
First, open a terminal and run the following command to create a brand new application.
A:\work>vue create vue-css-examples
Vue CLI v4.5.15
? Please pick a preset: Default (Vue 3) ([Vue 3] babel, eslint)
Vue CLI v4.5.15
✨ Creating project in A:\work\vue-css-examples.
🗃 Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
added 1274 packages in 2m
21 packages are looking for funding
run `npm fund` for details
🚀 Invoking generators...
📦 Installing additional dependencies...
added 73 packages in 19s
22 packages are looking for funding
run `npm fund` for details
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project vue-css-examples.
👉 Get started with the following commands:
$ cd vue-css-examples
$ npm run serve
vue create
is a Vue CLI, creates files and folders, Javascript, CSS, and configuration required for the Vue application. It also installs dependencies and live auto-reload and vue web server to run the application.
This command takes a couple of minutes, installs all required dependencies. Once It is done.
You should see new brand new Vue application with folder name - vue-css-examples
Next, Change to the application folder
cd vue-css-examples
Start the development server
In the terminal, run the below command to start the vue development server.
npm run serve
This start vue development server and opens a new browser window with localhost:8080 url

Add tailwindcss dependencies
There are multiple ways we can do npm install dependencies.
- using npm install manually
To integrate tailwind CSS, You need Tailwindcss
and peerdependencies
such as postcss
and autoprefixer
.
Npm packages required
-
tailwindcss
: CSS framework with predefined CSS styles -
postcss
: Tool to transform preprocessor CSS(sass,less) styles into another CSS files using javascript -
autoprefixer
: It is a postcss plugin to add vendor prefix selector. -
Install dependencies manually
Following install tailwindcss,postcss7-compact, and autoprefixer dependencies using below npm command
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
The installation will be done after a couple of minutes.
As a result, It installs and adds the dependencies in the package.json file.
{
"devDependencies": {
"autoprefixer": "^10.4.0",
"postcss": "^8.4.5",
"tailwindcss": "^3.0.2"
},
}
- vue cli using vue-cli-plugin-tailwind
Please run the below command to install all tailwind CSS dependencies
vue add tailwind
We learned two ways to add dependencies,
One way is manual, the second way is using the vue CLI command.
Finally, Recommended, easiest and simple is using vue add tailwind
command.
If you use this approach, It also creates a tailwind configuration and you can skip the `Add tailwind configuration` section
Add tailwind configuration
This section you can skip if you add dependencies with vue add tailwind command
.
You can add tailwind.config.js
with the below command
A:\work\vue-css-examples>npx tailwindcss init -p
Created Tailwind CSS config file: tailwind.config.js
Created PostCSS config file: postcss.config.js
Following files created in the application root folder.
- tailwind.config.js
- postcss.config.js
tailwind.config.js contains following entries.
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
In tailwind.config.js, Update the below things.
- change from purge:[]
- to purge: ['./src/**/*.{js,jsx,ts,tsx}', ‘./public/index.html’],
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './index.html'],
content: [],
theme: {
extend: {},
},
plugins: [],
}
Create CSS file and import in component
Create a folder css
in src
folder.
Create a new file tailwind.css
inside src/css
folder
Following is the directory structure.
src/
├── css/
├── tailwind.css
├── app.js
└── index.js
In tailwind.css, please include tailwind css styles
@tailwind base;
@tailwind components;
@tailwind utilities;
Next, please import tailwind.css in main.js
import { createApp } from 'vue'
import App from './App.vue'
import './css/tailwind.css'
createApp(App).mount('#app')
by running npm run start command, output.css
is generated in the src/css
folder
Add button to Vue component
In the Vue component HelloWorld.js
- Please import tailwind.css into this component
- update the component to include tailwind button HTML and tailwind CSS styles.
<template>
<h1 className="text-3xl font-bold underline">
Simple Tailwindo CSS application
</h1>
<button class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">
Save
</button>
<span>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded">
Submit
</button>
</span>
</template>
Run npm run serve command and You will see the output on the browser page as follows.

PostCSS plugin tailwindcss requires PostCSS 8 error in Vue application
I got the below error during the integration of tailwindcss to the existing vuejs application.
./src/css/tailwind.css (./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-3-1!./node_modules/postcss-loader/src??ref--7-oneOf-3-2!./src/css/tailwind.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
at Processor.normalize (A:\work\vue-css-examples\node_modules\postcss-loader\node_modules\postcss\lib\processor.js:153:15)
at new Processor (A:\work\vue-css-examples\node_modules\postcss-loader\node_modules\postcss\lib\processor.js:56:25)
at postcss (A:\work\vue-css-examples\node_modules\postcss-loader\node_modules\postcss\lib\postcss.js:55:10)
at A:\work\vue-css-examples\node_modules\postcss-loader\src\index.js:140:12
You can check code [Source code](https://github.com/intkiran/vue-css-examples)
This is an issue with how tailwind CSS and its dependencies configuration. Solution:
First, Uninstall dependencies using npm uninstall tailwindcss postcss autoprefixer
.
command as seen below.
A:\work\vue-css-examples>npm uninstall tailwindcss postcss autoprefixer
removed 50 packages, and audited 1469 packages in 8s
22 packages are looking for funding
run `npm fund` for details
30 vulnerabilities (19 moderate, 11 high)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit for details.
Next, Add the tailwind CSS dependencies with vue-cli-plugin-tailwind
.
vue-cli-plugin-tailwind
plugin is installed and configured with vue add tailwind
command.
A:\work\vue-css-examples>vue add tailwind
WARN There are uncommitted changes in the current repository. it's recommended to commit or stash them first.
? Still, proceed? Yes
📦 Installing vue-cli-plugin-tailwind...
added 1 package in 8s
22 packages are looking for funding
run `npm fund` for details
✔ Successfully installed plugin: vue-cli-plugin-tailwind
? Generate tailwind.config.js full? tailwind.config.js already exists! Do you want to replace it? Yes
🚀 Invoking generator for vue-cli-plugin-tailwind...
📦 Installing additional dependencies...
added 103 packages, removed 126 packages, and changed 1 package in 19s
22 packages are looking for funding
run `npm fund` for details
⚓ Running completion hooks...
✔ Successfully invoked generator for a plugin: vue-cli-plugin-tailwind
Conclusion
A Step by Step guide to create a Vue application and add tailwind CSS framework into it for example.