Tailwind不会在Angular 13的生产环境中构建类

Question

我在生产中构建时遇到了麻烦。我遵循了Angular指南，顺风在服务时工作得很好，但在构建应用程序时，它无法识别HTML文件中的任何类，因此不会在构建

中包含它们。当建筑我得到这个消息:warn - No utility classes were detected in your source files. If this is unexpected, double-check the内容option in your Tailwind CSS configuration.

版本:

• Angular CLI: 13.3.2
• 角:13.3.2
• 节点:16.15.0
• Package Manager: npm 7.10.0
• OS: win32 x64
• 顺风:3.0.24

tailwind.config.js如下所示:

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

顺风导入位于styles.scss顶部像这样:

/* 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: {},
},
};

我尝试过的事情

• 回到顺风2，将配置文件中的content更改为purge(使用content和设置enabled为true)。没有工作)
• 移除css导入的角材质。(没用)
• 更改配置content以包含所有内容('./**/*.{html,ts}'-不起作用)
• 更改配置content以包含特定的文件('./src/app/app.component.{html,ts}'-不起作用)
• 添加安全列表类(工作，但我不想这样做。)
• 使用命令行npx tailwindcss -o /output.css(工作正常)

有什么想法我可能做错了吗?感谢所有!

Answer 1

我能算出来。我从dist文件夹中的构建脚本调用ng build。tail .config.js中的内容路径不会从项目的根目录查找，而是从调用该命令的根目录查找文件。

因此，为了针对/src/app/*，我必须像这样再上一级:../src/**/*.html