Laravel 8 Installing Tailwind CSS ModuleBuildError:

Question

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

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

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

2.run npm install

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

4.after npx tailwindcss init

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

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

6.In webpack.mix.js

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

7.import顺风css在app.css

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

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

谁能帮帮我

Answer 1

我得到了 Learn-YT

方面的帮助

他建议编辑代码github

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

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

在此之后，它工作正常。

Answer 2

官方文档对我没有帮助，但这是我成功安装 Tailwind 的方法 Laravel 8:

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

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

使用命令生成 Tailwind 配置文件 npx tailwind init
打开 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 and/or php artisan ui vue --auth 之后，你将不得不重复这个过程，因为这些命令将更改文件的内容。我建议您在配置 Tailwind 之前运行这些命令。确保在所有这些之前先运行 npm install。

Laravel 8 Installing Tailwind CSS ModuleBuildError:

Laravel 8 Installing Tailwind CSS ModuleBuildError:

css

npm

laravel-mix

tailwind-css

laravel-8