How To Add Tailwind CSS In Vue.js

In this article, we will learn how to add Tailwind CSS in Vue.js

Prerequisites of React

  • Familiarity with the HTML, JavaScript and Bootstrap 
  • node.js installed

Create Vue.js Project

To create a Vue.js app, use the following command in the terminal

vue create tailwindcss

Install Tailwind CSS

Install tailwind using below command.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Generate the Tailwind and post CSS configuration files.

npx tailwindcss init -p

This command creates two files named: tailwind.config.js and postcss.config.js, add the following code in tailwind.config.js file

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

Add the Tailwind directives to your CSS

Create index.css file and add the folloiwng reference.

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

now import the index.css file in main.js file.

import Vue from 'vue'
import App from './App.vue'
import './index.css'
Vue.config.productionTip = false

new Vue({
    render: h => h(App),

Now open Helloworld.vue component and add the Tailwind’s classes.

  <div class="justify-center flex bg-blue-300 items-center h-screen">
    <div class="text-4xl">
      Hello Welcome to Tailwind Css

export default {
  name: 'HelloWorld',
  props: {
    msg: String

<style scoped>
h3 {
  margin: 40px 0 0;
ul {
  list-style-type: none;
  padding: 0;
li {
  display: inline-block;
  margin: 0 10px;
a {
  color: #42b983;

Now run the project using

npm run serve


 In this article, we learned how to add Tailwind CSS in Vue.js.

Similar Articles