如何为Electron Forge+Vite项目添加TailwindCSS？添加后无法生效

1. 检查Tailwind配置的路径覆盖 #

确保tailwind.config.js的content数组包含所有渲染进程中使用Tailwind类的文件，比如：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx,vue}", // 覆盖src下所有相关文件
    "./renderer/**/*.{js,ts,jsx,tsx,vue}" // 如果渲染进程代码在单独目录，需添加对应路径
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. 确认PostCSS配置正确性 #

检查postcss.config.js是否正确引入所需插件：

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

3. 添加Tailwind指令到全局CSS并引入 #

在项目全局CSS文件（比如src/style.css）中添加：

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

然后在渲染进程的入口文件（比如src/main.js或renderer.js）中引入该CSS：

import './style.css'

4. 验证Electron Forge的Vite配置 #

检查forge.config.js中的渲染进程配置，确保Vite能正常处理CSS文件，示例配置：

import { VitePlugin } from '@electron-forge/plugin-vite';

export default {
  plugins: [
    new VitePlugin({
      main: {},
      renderer: {
        config: './vite.renderer.config.js', // 若有单独渲染进程配置文件，确保无阻止PostCSS的设置
      },
    }),
  ],
};

5. 清理缓存重启项目 #

执行以下命令清理缓存后重新启动：

rm -rf node_modules/.cache
npm run clean # 若Electron Forge配置了clean脚本
electron-forge start

测试验证 #

在渲染进程的HTML或组件中添加测试代码：

<div class="text-red-500 text-2xl">测试Tailwind样式</div>

启动项目后查看是否显示红色大号字体，以此验证样式是否生效。

内容的提问来源于stack exchange，提问作者密龙云