'vite is not auto reloading index.html on save after tailwind installation as postcss plugin

I have installed Vite with Tailwind. But after installing Tailwind , when I change the index.html file, the Vite server does not auto reload. It reloads when I save the file main.js.

tailwind.config.js

module.exports = {
  content: ['./*.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

main.js

import './style.css';

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <h1 class="text-blue-500">helo</h1>
    <script type="module" src="/main.js"></script>
  </body>
</html>

style.css

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source