CODEWITHSUNDEEP
cssnpmlaravel-mixtailwind-csslaravel-8
Nishan than
Nishan than

Reputation: 69

Laravel 8 Installing Tailwind CSS ModuleBuildError:

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. enter image description here

Can anyone HELP me out

Upvotes: 1

Views: 2684

Answers (2)

user12475574
user12475574

Reputation:

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

  1. npm install tailwindcss
  2. Replace content of /resources/sass/app.scss with this:
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Generate Tailwind config file using command npx tailwind init
  2. Open the tailwind.config.js and change line purge: [], to:
    purge: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue"
    ],
  1. 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.

Upvotes: 1

Nishan than
Nishan than

Reputation: 69

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.

Upvotes: 1

Related Questions