Electron-vite集成TailwindCSS与PostCSS时@tailwind base报错

问题回顾 #

在Electron-vite项目中执行以下步骤后运行yarn dev报错：

• yarn add electron-vite -D
• yarn create @quick-start/electron
• yarn add -D tailwindcss postcss autoprefixer
• npx tailwind init -p

已尝试将@tailwind指令改为导入语句，但问题未解决。当前electron.vite.config.ts配置如下：

import react from '@vitejs/plugin-react'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import { resolve } from 'path'

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()],
    resolve: {
      alias: {
        '@/lib': resolve('src/main/lib'),
        '@shared': resolve('src/shared')
      }
    }
  },
  preload: {
    plugins: [externalizeDepsPlugin()]
  },
  renderer: {
    assetsInclude: 'src/renderer/src/assets/**',
    resolve: {
      alias: {
        '@renderer': resolve('src/renderer/src'),
        '@shared': resolve('src/shared'),
        '@hooks': resolve('src/renderer/src/hooks'),
        '@/assets': resolve('src/renderer/src/assets'),
        '@/store': resolve('src/renderer/src/store'),
        '@/components': resolve('src/renderer/src/components'),
        '@/mocks': resolve('src/renderer/src/mocks')
      }
    },
    plugins: [react()]
  }
})

解决方案步骤 #

1. 修正tailwind.config.js路径配置 #

Tailwind需要明确扫描Electron-vite renderer目录下的组件文件，修改tailwind.config.js：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/renderer/src/**/*.{js,ts,jsx,tsx}", // 匹配renderer下所有组件文件
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. 在Electron-vite配置中启用PostCSS #

在electron.vite.config.ts的renderer区块中添加CSS的PostCSS配置，确保Vite正确加载PostCSS配置文件：

renderer: {
  assetsInclude: 'src/renderer/src/assets/**',
  css: {
    postcss: './postcss.config.js' // 指定PostCSS配置文件路径
  },
  resolve: {
    alias: {
      '@renderer': resolve('src/renderer/src'),
      '@shared': resolve('src/shared'),
      '@hooks': resolve('src/renderer/src/hooks'),
      '@/assets': resolve('src/renderer/src/assets'),
      '@/store': resolve('src/renderer/src/store'),
      '@/components': resolve('src/renderer/src/components'),
      '@/mocks': resolve('src/renderer/src/mocks')
    }
  },
  plugins: [react()]
}

3. 确保全局样式文件正确引入Tailwind指令 #

在renderer的全局样式文件（如src/renderer/src/index.css）中添加：

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

并在renderer入口文件（如src/renderer/src/main.tsx）中导入该样式文件：

import './index.css'

4. 验证postcss.config.js配置 #

确保postcss.config.js内容正确：

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

5. 清理缓存并重新安装依赖 #

如果上述步骤无效，尝试清理缓存后重新安装：

rm -rf node_modules yarn.lock
yarn install
yarn dev

内容的提问来源于stack exchange，提问作者pushpendra_pal