Laravel Mix 不编译 Tailwind CSS

Question

我刚刚使用 Laravel 和 Sail 创建了一个新项目。我注意到当我运行“sail npm run dev”时，一些 Tailwind css 类没有加载。例如，未加载具有实用程序“py-5”的元素。所以，我决定再次尝试使用 Laravel Mix 进行编译，它终于成功了。使用 Tailwind css 列类时也会发生同样的情况。当我运行 Mix 时，它总是显示编译成功。

有什么想法吗？

Answer 1

问题的产生可能是因为您想在容器中构建一次 tailwindcss，但未在容器中配置/安装它。在本地它似乎已经为您工作。因此，您应该完成以下步骤。

确保您已经通过以下方式安装了 tailwind 和其他依赖项:sail npm install。

始终检查您是否通过 sail 安装了 postcss 和 autoprefixer:sail npm install -D tailwindcss@latest postcss@latest autoprefixer@latest。

然后检查你的 webpack.mix.js 文件。它必须看起来像:

mix.js("resources/js/app.js", "public/js")
    .postCss("resources/css/app.css", "public/css", [
     require("tailwindcss"),
    ]);

将这三行添加到您的 css 文件中:

@tailwind base;
@tailwind components;
@tailwind utilities;

然后运行sail npm run dev。