Laravel 8 安装 Tailwind CSS ModuleBuildError：答案

【问题标题】：Laravel 8 Installing Tailwind CSS ModuleBuildError:Laravel 8 安装 Tailwind CSS ModuleBuildError：
【发布时间】：2021-03-31 09:59:48
【问题描述】：

我正在学习 laravel 版本 8。尝试使用 npm 命令安装 tailwind CSS 时。

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

这里描述了我一步一步做了什么 1.使用 laravel 安装程序安装新的 laravel 8。

2.运行npm install

3.然后npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

4.npx tailwindcss init之后

5.并像这样编辑tailwind.config.js

    module.exports = {
    purge: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
    ],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {}
    },
    variants: {
        extend: {}
    },
    plugins: []
};

6.在 webpack.mix.js 中

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

7.在app.css中导入顺风css

@import "tailwind/base";
@import "tailwind/components";
@import "tailwind/utilities";

8.在运行npm run dev 之后。我在命令行中遇到了错误。

谁能帮帮我

【问题讨论】：

更新 node.js 是一种可能的解决方法。
@zonay 我尝试升级 node.js。但问题不在于 node.js。

标签： css npm laravel-mix tailwind-css laravel-8

【解决方案1】：

官方文档没有帮助我，但这是我成功将 Tailwind 安装到 Laravel 8 的方式：

npm install tailwindcss
将 /resources/sass/app.scss 的内容替换为：

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

使用命令npx tailwind init 生成 Tailwind 配置文件
打开tailwind.config.js并将purge: [],行改为：

    purge: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue"
    ],

将 webpack.mix.js 的内容更改为：

const mix = require("laravel-mix");
const tailwindcss = require("tailwindcss");

mix.js("resources/js/app.js", "public/js")
    .vue()
    .sass("resources/sass/app.scss", "public/css")
    .options({
        processCssUrls: false,
        postCss: [tailwindcss("./tailwind.config.js")]
    });

然后，当然，运行npm run dev 或npm run prod，尽情享受吧。

P.S.：如果您在任何情况下运行 composer require laravel/ui 和/或 php artisan ui vue --auth 在此之后，您将不得不重复该过程，因为这些命令会更改文件的内容。我建议您在配置 Tailwind 之前运行这些命令。确保在这一切之前先运行npm install。

【讨论】：

请总结一下链接的内容。

【解决方案2】：

我得到了Learn-YT的帮助

他建议编辑代码github

来自 css/app.css 的错误。改成这样的代码

@import "~tailwindcss/base.css";
@import "~tailwindcss/components.css";
@import "~tailwindcss/utilities.css";

在此之后，它可以正常工作。

【讨论】：