How To Install Tailwind Css In Vue Js – Step By Step Guide

Install vue js

npm install -g @vue/cli @vue/cli-service-global
vue create test
npm run serve

Install Tailwindcss

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

 generate config files, type the following command

npx tailwindcss init -p

replace In the tailwind.config.js file

- replace purge: []
- with purge: ['./index.html’, ‘./src/**/*.vue,js,ts,jsx,tsx}']

 

Under the src folder create index.css and add the following.

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

 

 In the main.js file, import index.css

import './index.css'

 

If you get Error: PostCSS plugin tailwindcss requires PostCSS 8.

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