Vite环境下Tailwind CSS与Handlebars联动样式失效问题

我在搭建Vite项目，集成了Tailwind CSS与Handlebars实现HTML模板复用功能。当前遇到的问题：代码提示正常，但保存Handlebars模板片段时，文本内容更新正常但Tailwind样式类未生效；重新保存index.html或main.js文件后，模板片段中的样式类才会正常应用。

以下是项目配置文件：

postcss.config.js #

import autoprefixer from "autoprefixer";
import tailwindConfig from "./tailwind.config.js";

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

tailwind.config.js #

export default {
  prefix: "six-",

  content: [
    "./index.html",
    "./test.html",
    "./*.{vue,js,ts,jsx,tsx}",
    "./parts/*.html",
  ],
  purge: ["./index.html", "./test.html", "./*.js", "./parts/*.html"],
  theme: {
    extend: {},
  },
  plugins: [],
};

vite.config.js #

import postcss from "./postcss.config.js";
import { resolve } from "path";
import handlebars from "vite-plugin-handlebars";

export default {
  plugins: [
    handlebars({
      partialDirectory: resolve(__dirname, "parts"),
      context: {
        title: "Hello, world!",
      },
    }),
  ],
  css: {
    postcss,
  },
};

package.json #

{
  "name": "v1",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.8",
    "postcss": "^8.4.16",
    "tailwindcss": "^3.1.8",
    "vite": "^3.0.7"
  },
  "dependencies": {
    "lodash": "^4.17.21",
    "vite-plugin-handlebars": "^1.6.0"
  }
}

index.html #

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body class="six-bg-teal-100">
    {{> header}}
    <div
      id="app"
      class=""
      delay="2000"
      img="https://images.unsplash.com/photo-1660675716662-7e7b19395d44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
    ></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

parts/header.html（Handlebars模板片段） #

<div class="six-font-bold six-text-green-400 six-text-6xl">Hello world</div>

问题排查与修复方案 #

1. 修复PostCSS配置的导入错误 #

postcss.config.js中缺少tailwind函数的导入，导致PostCSS无法正确调用Tailwind CSS处理样式：
修改后的postcss.config.js：

import autoprefixer from "autoprefixer";
import tailwind from "tailwindcss"; // 补充tailwind函数导入
import tailwindConfig from "./tailwind.config.js";

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

2. 移除Tailwind配置中的冗余purge字段 #

Tailwind CSS v3已使用content替代purge字段，保留purge会导致逻辑冲突，删除该字段：
修改后的tailwind.config.js：

export default {
  prefix: "six-",

  content: [
    "./index.html",
    "./test.html",
    "./*.{vue,js,ts,jsx,tsx}",
    "./parts/*.html",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

3. 配置Vite监听Handlebars模板文件，触发热更新 #

Vite默认不会将Handlebars模板文件标记为CSS构建依赖，因此修改模板时不会触发Tailwind重新生成样式。在vite.config.js中添加监听配置：
修改后的vite.config.js：

import postcss from "./postcss.config.js";
import { resolve } from "path";
import handlebars from "vite-plugin-handlebars";

export default {
  plugins: [
    handlebars({
      partialDirectory: resolve(__dirname, "parts"),
      context: {
        title: "Hello, world!",
      },
    }),
  ],
  css: {
    postcss,
  },
  // 监听parts目录下的html文件变化
  server: {
    watch: {
      files: ["./parts/*.html"],
    },
  },
};

验证效果 #

修改parts/header.html中的Tailwind样式类并保存，此时样式应实时生效，无需重新保存index.html或main.js。

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