Infinite Vite HMR updates to tailwind.css file – Ionic project

I have an Ionic+React+Tailwind+React project. I am relatively new to frontend development, especially Vite. When I run my project, I see there are “HMR updates” in a loop coming from the tailwind.css file. Even though I am not making any changes to the tailwind.css file.

Attaching an image of the “updates” log.

The package.json –

{
  "name": "flow-fa",
  "private": true,
  "version": "0.0.1",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "test.e2e": "cypress run",
    "test.unit": "vitest",
    "lint": "eslint",
    "build:css": "postcss tailwind.css -o src/theme/tailwind.css",
    "watch:css": "postcss tailwind.css -o src/theme/tailwind.css -w",
    "start:dev": "npm run watch:css & ionic capacitor run android -l --external"
  },
  "dependencies": {
    "@capacitor/android": "6.1.2",
    "@capacitor/app": "6.0.1",
    "@capacitor/core": "6.1.2",
    "@capacitor/haptics": "6.0.1",
    "@capacitor/keyboard": "6.0.2",
    "@capacitor/status-bar": "6.0.1",
    "@ionic/react": "^8.0.0",
    "@ionic/react-router": "^8.0.0",
    "@types/react-router": "^5.1.20",
    "@types/react-router-dom": "^5.3.3",
    "ionicons": "^7.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^5.3.0",
    "react-router": "^5.3.4",
    "react-router-dom": "^5.3.4"
  },
  "devDependencies": {
    "@capacitor/cli": "6.1.2",
    "@testing-library/dom": ">=7.21.4",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-legacy": "^5.0.0",
    "@vitejs/plugin-react": "^4.0.1",
    "autoprefixer": "^10.4.20",
    "cypress": "^13.5.0",
    "eslint": "^8.35.0",
    "eslint-plugin-react": "^7.32.2",
    "jsdom": "^22.1.0",
    "postcss-cli": "^11.0.0",
    "tailwindcss": "^3.4.14",
    "terser": "^5.4.0",
    "typescript": "^5.1.6",
    "vite": "~5.2.0",
    "vitest": "^0.34.6"
  },
  "description": "An Ionic project"
}

The vite.config.ts

/// <reference types="vitest" />

import legacy from '@vitejs/plugin-legacy'
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    legacy()
  ],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupTests.ts',
  }
})

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,jsx,ts,tsx,css}'],
  darkMode: 'media',
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Tailwind.css

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

Please let me know if I shud be adding any other details. I need to get this fixed because I guess due to this, the app behaves weird too. All of a sudden RAW HTML will get rendered and then it’ll go back to the styled one.