Install and setup TailwindCSS
-
Start by following official Install Tailwind CSS with Vue 3 and Vite instructions. Install
tailwindcss
.
$ npm install --save-dev tailwindcss@latest postcss@latest autoprefixer@latest
-
Create configuration files.
$ npx tailwindcss init -p
-
Configure tree-shaking (removal of unused styles). Update
tailwind.config.js
.
- purge: [], + purge: ['./index.html', './src/**/*.{js,jsx,ts,tsx,vue}'],
Create
index.css
.touch src/index.css
.-
Update
src/index.css
.
+@tailwind base; +@tailwind components; +@tailwind utilities;
-
Import
src/index.css
insrc/main.ts
.
import App from '@/App.vue' +import '@/index.css'
git add -u && git add tailwind.config.js postcss.config.js src/index.css
git commit -m 'install tailwindcss'
Top comments (0)