Tailwind css 无法在 Vite 设置中使用 Handlebars 文件答案

【问题标题】：Tailwind css not working with Handlebars file in Vite setupTailwind css 无法在 Vite 设置中使用 Handlebars 文件
【发布时间】：2022-08-23 00:25:22
【问题描述】：

我正在尝试 vite 设置并拥有 tailwindcss 和车把（添加一些部分 html 功能）。

问题是智能感知工作正常，但是每当我保存车把部分时，它的更新文本和类会发生变化，但不会从尾风端应用类，但是当我从同一个项目中重新保存 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,
  },
};

包.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\"
  }
}

索引.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>

部分/header.html（车把部分）

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

向我们展示一些不起作用的 HTML 代码
@tauzN 感谢您的评论，我已经用 index.html 和 header.html （车把文件）更新了我的问题

标签： javascript handlebars.js tailwind-css vite

【解决方案1】：

从tailwind.config.js 中删除清除

// 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: [],
};

添加一个包含以下内容的 main.css 文件：

/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

引用 HTML 上的 css：

<!-- index.html -->
...
  <link href="/dist/main.css" rel="stylesheet">
...

【讨论】：