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