我在生产环境下构建时遇到了使用Tailwind的问题。我按照Angular指南操作,当我进行服务时,Tailwind可以正常工作,但是在构建应用程序时,它无法识别HTML文件中的任何类,并因此未将其包含在构建中。
构建时我收到以下消息:
在 styles.scss 文件的顶部,tailwind 的导入应该像这样:
构建时我收到以下消息:
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
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
(可以正常工作)
您有什么想法可能是我做错了什么?谢谢大家!