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.
@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.
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
npx tailwindcss init -p
It will create two files. One is postcss.config file another one is tailwindcss.config file