setup-in-vue3.md

Setup Tailwind in Vue3

I had trouble installing Tailwind in a Vue3 project using this guide. I tried installing Tailwind with:

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

But I ended up having to do this:

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

The rest worked out fine. I installed config files with:

npx tailwindcss init -p

This will create tailwind.config.js and postcss.config.js at the root. Inside tailwind.config.js, I updated the purge attribute to:

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], // new
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Then I created a root level index.css file.

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Then I imported index.css in main.js

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
import './index.css'

createApp(App).use(router).use(store).mount('#app')

Then, npm run serve should bring the project up on localhost:8080.