I got an answer from Vite Discord channel. This is the solution to convert postcss and tailwindcss config files to ESModule.

Do this, and you can use import in those config files.

tailwind.config.js

export default {
  purge: ['./*.html', './src/**/*.{vue,js,ts,jsx,tsx,css}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

import tailwind from 'tailwindcss'
import autoprefixer from 'autoprefixer'
import tailwindConfig from './tailwind.config.js'

export default {
  plugins: [tailwind(tailwindConfig), autoprefixer],
}

vite.config.js I added import postcss from './postcss.config.js' and

css: {
  postcss,
},

Ensure you:

• Are running Tailwind v3.3+ for configuration file ESM format support
• Use the mjs extension for tailwind.config.mjs instead of tailwind.config.js if you do not have "type": "module" in the project's package.json
• Use ESM syntax in the configuration file
• Add a comma after the theme object declaration
• Do not execute the imported plugin function

import myPlugin from './my-plugin';

export default {
    mode: 'jit',
    darkMode: 'class',
    content: [
        './pages/**/*.{js,ts,jsx,tsx}',
        './components/**/*.{js,ts,jsx,tsx}',
    ],
    theme: {
    },
    plugins: [
        myPlugin,       
    ],
};

ESM module syntax and CommonJS syntax is being mixed here. Tailwind requires the configuration file to be in CommonJS format:

-export default {
+module.exports = {
   content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
   theme: {
     extend: {},
   },
   plugins: [require("@tailwindcss/forms")],
 };

According to the team, they won't be supporting ESM anytime soon.

https://github.com/tailwindlabs/tailwindcss/issues/8029#issuecomment-1086875656