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

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.

assets/style.css

@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