Tailwind在Angular 13生产环境中无法构建类。

Question

我在生产环境下构建时遇到了使用Tailwind的问题。我按照Angular指南操作，当我进行服务时，Tailwind可以正常工作，但是在构建应用程序时，它无法识别HTML文件中的任何类，并因此未将其包含在构建中。

构建时我收到以下消息：warn - No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration. 版本信息如下：

• Angular CLI: 13.3.2
• Angular: 13.3.2
• Node: 16.15.0
• Package Manager: npm 7.10.0
• OS: win32 x64
• Tailwind: 3.0.24

tailwind.config.js文件如下：

module.exports = {
  content: ['./src/**/*.html'],
  theme: {
    extend: {},
  },
  plugins: [],
};

在 styles.scss 文件的顶部，tailwind 的导入应该像这样：

/* You can add global styles to this file, and also import other style files */
@tailwind base;
@tailwind components;
@tailwind utilities;

我还创建了一个Postcss配置文件，因为我不确定Angular在底层如何编译以及是否有必要。

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

我尝试过的方法

• 回到Tailwind 2，并在配置文件中将content更改为purge（使用content并将其启用为true，但没有起作用）
• 删除Angular Material CSS导入（没有起作用）
• 将配置文件中的content更改为包括所有内容（'./**/*.{html,ts}' - 没有起作用）
• 将配置文件中的content更改为包括特定文件（'./src/app/app.component.{html,ts}' - 没有起作用）
• 添加安全列表类（可以运行，但我不想这样做）
• 使用CLI npx tailwindcss -o /output.css（可以正常工作）

您有什么想法可能是我做错了什么？谢谢大家！

- mcheah

Answer 1

我成功解决了这个问题。我在dist文件夹中的构建脚本中调用了ng build。tailwind.config.js中的内容路径不是从项目根目录开始查找文件，而是从命令所在的根目录开始查找文件。

因此，为了定位到/src/app/*，我必须向上移动一级，如下所示：../src/**/*.html。

- mcheah