tailwindcss在vite esm模式下的配置修改

vite6将弃用cjs（CommonJS ）采用ESM（ESModule），所有的js文件将编译为ESM语法，参考cn.vitejs.dev/guide/troub…

基于ESM方式，我们需要对导出导入方式和postcss插件加载方式进行调整

postcss.config.js

import autoprefixer from 'autoprefixer'
import tailwindcss from 'tailwindcss'
​
export default {
  plugins: [
    tailwindcss(),
    autoprefixer(),
  ]
}

如果是在vite.config.ts中配置的postcss，require() 是 nodejs的方法，自然无法使用了

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
​
import autoprefixer from 'autoprefixer'
import tailwindcss from 'tailwindcss'
​
export default defineConfig({
  ...
  css: {
    postcss: {
      plugins: [
        //require('tailwindcss'),
        //require('autoprefixer'),
        tailwindcss(),
        autoprefixer(),
      ]
    }
  }
})

如果postcss插件使用了px转vw，一定要写在 autoprefixer() 后面

export default defineConfig({
  ...
  css: {
    postcss: {
      plugins: [
        //require('tailwindcss'),
        //require('autoprefixer'),
        tailwindcss(),
        autoprefixer(),
        postcsspxtoviewport8plugin({...})
      ]
    }
  }
})