How to add Tailwindcss in Vue Js Application

tutspack laravel
Spread the love

Hello Developers,

Tailwindcss in Vue js tutorial. How are you doing? In this tutorial, I will show you how to add tailwind CSS to yourTailwindcss Vue js application. For UI design many times we need to add tailwind in our application. In this Tailwindcss tutorial, I will share with you simple tips so that you can add Tailwindcss easily.

How to add Tailwindcss in Vue Js Application

tailwindcss in vue

Well, First install a Vue application using vue CLI. Run this code in your terminal where you want to install your project.

vue create project

Well, now you have to wait a couple of times for installing a fresh vue project. But remember you have to select some options as the need for your project.

Note: before run vue create a project this command you can check your vue version by this command.

vue --version //output : @vue/cli 4.5.12

Well, Now time to add Tailwindcss to our application. Run bellows code in your terminal.

vue add tailwind 

Done. With one command you can set up tailwind in your project. Well, now you have to create a CSS file anywhere in your project but it will be great for you inside the assets folder.


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

well now import this CSS file in the main.js file

import Vue from 'vue'
import App from './App.vue'
import './assets/main.css'

Well, Our all setup has been done. Now you can check that your tailwind CSS working or not. Hope it will help you.

Read More : To Do List Project using Vanilla Javascript

Another step is to add Tailwind in Vue applications. Run this command

npm install tailwindcss postcss autoprefixer

If you face any problem like below :

Error: PostCSS plugin tailwindcss requires PostCSS 8.

Now you have to run two commands.

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

After then

npx tailwindcss init -p

It will create two files. One is postcss.config file another one is tailwindcss.config file

Spread the love

About Anisur Rahman Shahin

Hello. My name is Shahin. I'm a tech enthusiast guy. Personally, I’m an Optimistic and always in hurry kinda person. I'm a freelance web developer. I am working at Zakir Soft as Laravel Developer. My Portfolio website:

View all posts by Anisur Rahman Shahin →

Leave a Reply

Your email address will not be published.