Laravel 8 Installing Tailwind CSS ModuleBuildError:

Question

I am learning laravel version 8. when trying to install tailwind CSS using the npm command.

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

Here described what I did step by step 1.installed fresh laravel 8 using laravel installer.

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 edit tailwind.config.js like this

    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 the tailwind css in app.css

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

8.after run npm run dev. I have faced an error in the command line.

Can anyone HELP me out

@zonay I tried with upgrade node.js. but the issue was not it node.js. — Nishan than
– Nishan than, Commented Dec 22, 2020 at 15:51

Nishan than · Accepted Answer · 2020-12-22 15:50:43Z

1

I got help with Learn-YT

He suggested editing the code github

the error from the css/app.css. changed the code like this

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

after this, it's working correctly.

answered Dec 22, 2020 at 15:50

Nishan than

692 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

score 1 · Accepted Answer · 2021-04-20 09:15:09Z

1

The official documentation did not help me, but this is the way I successfully installed Tailwind to Laravel 8:

npm install tailwindcss
Replace content of /resources/sass/app.scss with this:

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

Generate Tailwind config file using command npx tailwind init
Open the tailwind.config.js and change line purge: [], to:

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

Change content of webpack.mix.js to:

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")]
    });

Then, of course, run npm run dev or npm run prod, and enjoy.

P.S.: If you ran in any case composer require laravel/ui and/or php artisan ui vue --auth after this, you will have to repeat the process since these commands will change content of your files. I advise you to run these commands before configuring Tailwind. Make sure also to first run npm install before all this.

edited Apr 20, 2021 at 9:15

answered Apr 19, 2021 at 21:16

user12475574

1 Comment

M-Chen-3 Over a year ago

Please summarize the contents of the links.

Collectives™ on Stack Overflow

Laravel 8 Installing Tailwind CSS ModuleBuildError:

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related