Vite搭建的Vanilla JS项目集成Tailwind开发正常构建后失效如何解决

• 核心原因是你使用了 Tailwind 已废弃的配置语法：Tailwind v3 及以上版本已经将顶层的 purge 配置项替换为 content 配置项，旧配置在生产构建阶段不会被识别，导致 Tailwind 无法扫描到你项目中用到的类名，默认裁剪掉了所有未被检测到的样式。而开发模式下 Tailwind 默认关闭样式裁剪，所以样式可以正常生效。
• 附加常见触发原因：Vite 初始化的 Vanilla JS 项目默认将入口 index.html 放在项目根目录，如果你在根目录的 index.html 中使用了 Tailwind 类名，但扫描路径只包含 src 目录下的文件，也会导致对应类名的样式被裁剪。

1. 替换 tailwind.config.js 中的配置项，将 purge 修改为 content，同时根据你的文件结构补充根目录 index.html 的扫描路径，修改后配置参考：

module.exports = {
  content: [
    './index.html', // 新增根目录入口html的扫描路径
    './src/**/*.html',
    './src/**/*.js',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

2. 确认你的入口 CSS 文件（通常是 src/style.css）中已经正确引入 Tailwind 指令，内容如下：

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

3. 重新执行 npm run build 命令构建项目，启动构建产物即可看到样式正常加载。

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