Encountering a ModuleBuildError while setting up Tailwind CSS in Laravel 8

I am currently learning Laravel version 8 and encountered an issue while trying to install Tailwind CSS using the npm command.

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

Here is a detailed step-by-step explanation of what I did:

  1. Installed a fresh Laravel 8 using the Laravel installer.
  2. Ran npm install.
  3. Executed 
    npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
    .
  4. Ran npx tailwindcss init.
  5. Edited the tailwind.config.js file as follows:
module.exports = {
    purge: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
    ],
    darkMode: false,
    theme: {
        extend: {}
    },
    variants: {
        extend: {}
    },
    plugins: []
};

Updated the webpack.mix.js file:

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

Imported Tailwind CSS in the app.css file:

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

After running npm run dev, I encountered an error in the command line. Any help would be greatly appreciated.

cssnpmlaravel-mixtailwind-csslaravel-8

Answer №1

Thanks to the guidance of a tutorial from Learn-YT

I followed the suggestion to make changes to the code on GitHub

The issue stemmed from the css/app.css file. I made adjustments to the code as shown below:

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

After implementing these changes, everything is now functioning smoothly.

Answer №2

I struggled with the official documentation, but I found a successful way to install Tailwind on Laravel 8:

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

Finally, run npm run dev or npm run prod, and you're good to go.

P.S.: If you happen to use composer require laravel/ui and/or php artisan ui vue --auth later on, you will need to repeat these steps as these commands alter your files. It's recommended to execute these commands before setting up Tailwind. Also, make sure to first run npm install before proceeding with any of this setup.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AngularJS: Understanding the difference between ng-show and using display:none

I recently encountered a scenario where I needed to hide an HTML element by default using CSS. Here's how I did it: HTML: <div class="box"> </div> CSS: .box { display: none; } However, I wanted to be able to show and hide the elem ...

javascriptcssangularjsng-show

Minimize the width to display a scrollbar

Check out this page: where you'll find the same code snippet displayed twice - once through GitHub Gist embedding and the second using Jekyll's internal syntax highlighter Rouge. I'm currently working on styling the second code snippet to m ...

htmlcss

The issue with the search box not being correctly displayed on Google CSE using Twitter Bootstrap

Having an issue with the Google Custom Search (CSE) as it is not displaying the search box and button correctly. I am using Twitter Bootstrap v3.1.0. <script> (function() { var cx = '009077552906670546181:2ufng0dmsos'; ...

jquerycsstwitter-bootstrapgoogle-custom-search

The webpack-concat-text-plugin "node" is not compatible

The concat-text-webpack-plugin is located deep within a package, and it throws errors when I have NextJS and Node 18. Error: The engine "node" is incompatible with this module. Expected version ">=8 <=16". Got "18.16.0" Error Found incompatible modul ...

node.jsnpmwebpackyarnpkgwebpack-plugin

I am unable to switch my carousel to full-screen mode

I'm struggling to make the carousel fullscreen even though I've set the width to 100%. Bootstrap was used in this project. Any help would be appreciated. Thank you! <html> <head> <link href="homepage.cs ...

htmlcss

Utilizing libraries in JavaScript

For a while now, I've been grappling with an issue related to importing modules into my main JavaScript script. I recently installed the lodash library via npm and I'm trying to import it into my main script so that I can utilize its functionali ...

javascriptnpmimportlodash

utilizing symbols from a vector graphic icon库

There are countless icon images to be found on the internet. Recently, I came across this particular set and now I'm stumped on how to actually utilize them. Despite my efforts to find tutorials online, I have come up short in finding any helpful reso ...

htmlcssvectoricons

What is the best way to position the section and footer to the left side of the sidenav?

I am relatively new to the world of html and css, trying my hand at constructing html layouts. I have encountered a bit of trouble in aligning the footer and section to the left of the nav bar. No matter what percentage widths I use, they always end up ove ...

htmlcss

Increment version number automatically in Node.js package and push changes to git

I'm having trouble figuring out how to automatically increment the version number in my node application's package.json file. I know that npm has a script called version, which takes 3 parameters: minor, major, and patch. However, when I try to u ...

node.jsgitnpmversioning

Troubleshooting: Angular Application Fails to Launch Following Git Repository Cloning

After successfully completing the Angular Tour of Heroes tutorial with some tweaks, I attempted to push it to a GIT repo in VSTS and clone it onto another machine. However, upon cloning it to the new machine, I am encountering issues trying to get it up an ...

angulargitnpm

Obtaining the URL from the anchor tag

I am currently working on a project that involves scraping data from the cinch.co.uk website. My tools of choice are Python along with the BeautifulSoup4 and Request libraries. My goal is to extract car data from each advertisement, starting by navigating ...

pythonhtmlcssweb-scrapingbeautifulsoup

Integrate the dForm plugin with a convenient time picker widget

Currently, I am attempting to integrate a time picker widget into a jQuery plugin called dForm. The specific timepicker widget can be found at the following link: https://github.com/jonthornton/jquery-timepicker Despite reviewing the dForm documentation, ...

javascriptjqueryhtmlcssjquery-plugins

Mastering the art of using transitions in conjunction with display properties

I'm trying to achieve a fade-in effect with the CSS property display:block. Here's my HTML code: <div>Fade</div> And here's my CSS code: div { display: none; transition: 2s; } div:hover { display: block; } Unfortunately, thi ...

htmlcss

The dependencies listed in the JSON package are not in sync with each other

I find the behavior in NPM and the package.json file regarding package dependencies confusing. A prime example is the package gulp-watch. Looking at its package.json file on GitHub, we can see that it has a dependency on "anymatch": "^3.1.1& ...

node.jsnpmyarnpkgpackage.json

Using pure CSS to style sibling span elements in a unique color

Looking to change the color of a specific span based on the title attribute of another span in a different div. The code below successfully turns text2 red if it has the title of "Red". span[title=Red] ~ span { color: red; } <span title="Red" ...

htmlcss

Concealing a Div element without the use of Jquery or JavaScript

I have an Upper and Lower div in my HTML code. I am trying to display the Lower div only if the Upper div is present, otherwise hide it. Is there a way to achieve this using CSS without using Jquery or Javascript? Note: No modifications should be made t ...

javascriptjquerycss

The submit button on the HTML form is not functioning properly and requires activation

Currently, I am a student focusing on honing my skills by working on an app for a blog post. To kickstart my project, I downloaded the "clean-blog" template from the startbootstrap website. If you are interested, here is the link to the template: My curr ...

htmlcssformsejs

Exporting the flutter PATH can cause conflicts with the functionality of docker cli and npm

Hello, I've encountered an issue that is puzzling me. After installing Flutter and adding its path to my .zshrc file as shown below: export PATH={$PATH}:/Users/matteo/Documents/flutter/bin I started experiencing difficulties with Docker and/or Npm ( ...

dockerflutternpm

The issue with updating the menu class in Internet Explorer 8 is not being resolved

Here is a code snippet using JavaScript: var x = jQuery(window).innerHeight(); jQuery(document).scroll(function() { if (jQuery(this).scrollTop() >= x) { jQuery('#nav').removeClass('nav').addClass('topfix_nav'); ...

jquerycssinternet-explorer-8

TestCafe Environment Variables are not properly defined and displaying as undefined

Exploring TestCafe and diving into the world of automated testing. Trying to master the tools with guidance from Successfully executing code on my Windows setup! fixture`Getting Started`.page`http://devexpress.github.io/testcafe/example`; test("My ...

node.jstypescriptnpmtestcafeui-testing