Vue3 + Tailwind + SASS + Vite with Instant Hot Reload setup using PostCSS Plugin

package.json

{
  "name": "vue-project",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
   // "pinia": "^2.0.28",
   // "vue-router": "^4.1.6",
   "vue": "^3.2.45",
  },
  "devDependencies": {
    "@csstools/postcss-sass": "^5.0.1",
    "@vitejs/plugin-vue": "^4.0.0",
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.21",
    "postcss-scss": "^4.0.6",
    "tailwindcss": "^3.2.4",
    "vite": "^4.0.0"
  }
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import sassSyntax from 'postcss-scss';
import sassPlugin from '@csstools/postcss-sass';
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      syntax: sassSyntax,
      plugins: [
        sassPlugin(),
        tailwindcss(),
        autoprefixer(),
      ]
    },
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})