npm 运行 prod 后的错误

Question

我正在使用 Laravel 和 Tailwind 在共享主机上开发一个小型网站。我可以在主机上使用命令行工具。在本地环境中，tailwind 可以正常工作，但在 npm run prod 之后，大多数 Tailwind 功能都丢失了，app.css 和 app.js 似乎有错误。

例如悬停时缩放 -> transform hover:scale-105 duration-200 在主机上不起作用。

我尝试使用 cdn 导入 Tailwind，但这不是永久性的解决方案。

我做错了什么？？我找了几天没有运气的答案

Answer 1

我假设您在本地运行 npm run dev 并在生产中 npm run prod。默认情况下，Tailwind 的开发版本不会删除未使用的样式规范。但是当使用 npm run prod 未使用的样式时 purged for production 用法。

正如您在文档中看到的那样，模板的路径应该在 tailwind.config.js.

的 purge 部分中配置

module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
  ],
  // .. more ..

This list should include any files in your project that reference any of your styles by name

如果您不配置这些路径，Tailwind 不知道您使用了哪些 classes，因此将清除它找不到的所有样式，f。前任。你的 hover:scale-105.

解决方案“脏”：.
您运行 npm run dev 在生产中，这将导致您的 css 的大型构建，但现在解决了这个问题。

解决方案“干净”：.
您正确配置路径，让 Tailwind 正确识别它并清除未使用的样式...然后开心。

您也可以通过运行ning npm run prod 在您的开发环境中对此进行测试，看看会发生什么。

Answer 2

npm run production 之后的 app.css 文件仍然有一些警告，当我将它上传到主机时，警告变成了错误。这是截图。

然而，当我在 npm run dev 之后使用该文件时，一切正常。也许我在 Tailwind 类之间发生了碰撞。我会想出答案的。

Errors after npm run prod