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

CSS navbar with a unique design: Issue with List Hover not Persisting

I'm facing a common issue with a pure CSS navbar. I have constructed a navbar using ul and li elements, but I am unable to make the menus stay visible when I hover over them. The problem lies in the fact that the menu opens only when I hover over the ...

javascriptjqueryhtmlcsstwitter-bootstrap

The functionality of the React Router DOM seems to be malfunctioning

I am facing an issue with running a program on my computer while it runs successfully on other PCs. When I try to run this program, I encounter the following error message. Any help in fixing this would be greatly appreciated... index.js import React, {C ...

javascriptreactjsnpmreact-routerreact-router-dom

Is there a way to point my Github URL to the index file within a specific folder?

The actual working location of my website: My desired working location for the site: Originally, I had my index.html file in the main repository, but later moved it to an html folder along with other html files for better organization. How can I ensure t ...

javascripthtmlcssgitgithub

The error message "The specified path could not be found" is thrown by electron-winstaller when trying to create a zip file from a directory using the Squirrel.Utility.CreateZipFromDirectory method. This

I'm currently in the process of creating an electron installer for the Windows platform using Azure DevOps. The electron-package command was successfully executed with npm run build (refer to my package.json). However, when attempting to create RELEAS ...

node.jsnpmazure-devopselectronelectron-packager

Troubleshooting Challenges with JavaScript DOM Manipulation

I am facing an issue with a table where I need the first column to remain fixed when scrolling horizontally. The code snippet below works perfectly for the first column of td's, but fails to work for the tr's. Despite checking the code thoroughly ...

javascripthtmlcss

Troubleshooting Bootstrap Social Buttons: Background Color and Hovering Challenges

I've been working with Bootstrap to design social buttons for Facebook and LinkedIn. However, I'm facing an issue where setting the background color to white for the buttons doesn't cover them properly. The white background extends beyond th ...

htmlcssbootstrap-4

Ways to adjust the size of a container to perfectly match the width of its child elements

My challenge involves two squares in a container that overlap using transform: translate. I am seeking to eliminate the padding to the right of the blue square so that the container perfectly accommodates the width of the children. View the image for clari ...

htmlcss

Analyzing the string's worth against the user's input

I need help figuring out how to save user input on a form (email and password) as variables when they click "Register", so that the data can be used later if they choose to click "Login" without using default information. I am working on this project for s ...

javascripthtmlcss

Setting up Vue router for Vue 2.6.12 in Laravel 9

I encountered an issue while trying to install Vue Router using the command "npm install vue-router". The error message displayed is as follows: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: ...

laravelvue.jsnpmvuejs2

Certain issues arise when adjusting the padding within the background color of solely the inline text element

Appreciate your time. I'm working on adding background color to the TEXT exclusively, and have successfully done so by styling .post-title { text-transform:capitalize; margin-top:4px; margin-bottom:1px; font-size:22px; background-color:#FFF; dis ...

htmlcssbackground

The functionality of Nativescript squared buttons is not functioning as expected

I recently developed a Nativescript app using Angular, incorporating customized buttons. However, I have encountered an issue where I am unable to achieve perfectly squared buttons with the desired appearance. Here is my CSS code: Button { font-size: ...

cssnativescriptangular2-nativescript

What is the process for authenticating an npm registry within a Docker container in Visual Studio Team Services (VSTS)?

I am currently working on setting up a Docker Compose build task for my Node.js project on VSTS. As we are transitioning to using a private npm registry on VSTS, it has become crucial for the Docker container to authenticate with the registry in order to d ...

npmdocker-composeazure-devopsazure-pipelinesazure-pipelines-build-task

Truncate a string in Kendo Grid without any white spaces

While using a Kendo-Grid for filtering, I've come across an issue where my cell does not display the full string if there is no white space. The problem can be seen in the image below: For example, the string "https://www.linkedi/Testing" is only dis ...

htmlcssangularfrontendkendo-grid

Struggling to make @font-face function properly

I am attempting to incorporate a custom font into my website. In my CSS file, I have the following: body { font-family: HurmeGeometricSans4_SemiBold; } @font-face { font-family: HurmeGeometricSans4_SemiBold; src: url(resources/Hurme_Design_-_ ...

htmlcss

Building an easy-to-use jQuery task list

I'm currently working on a basic to-do list in Javascript, but I've encountered an issue. When I check the checkbox, the style of the adjacent text doesn't change as expected. Instead, it's the heading text that is affected by the chang ...

javascriptjqueryhtmlcss

When installing dependencies for hardhat, npm may encounter errors and fail to complete the

Encountering issues with the installation of the following dependencies: npm install ethers hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers The following errors occurred: npm WARN deprecated <a href="/cdn-cgi/l/email-pr ...

reactjsnpmethereumganachehardhat

Creating a stripped box shadow with just HTML and CSS - a simple guide

Hey there! I'm trying to create a navbar button with a cool stripped box shadow effect when hovered, similar to what you see in this image link. I attempted to achieve this using CSS box-shadow and linear gradient, but unfortunately it didn't qui ...

htmlcss

Can you tell me which CSS property is used to display the ellipsis (...) when there is overflow in the x

When the content exceeds the parent's width, the property overflow-x displays a scrollbar. However, I would prefer to show three dots "..." instead of the scrollbar. Is there a way to do this? ...

css

Achieve a full-height sidebar design similar to Wordpress using flexbox functionality

Working on a web app that features a tools sidebar with a fixed width requirement amidst fluid content. Explored using flexbox to achieve this, but encountered an issue where the main box only takes the height of the viewport instead of the entire site&ap ...

htmlcssflexboxsidebar

What causes images to shift when resizing in Chrome, but not in Firefox or Safari?

My layout includes images - one on the left and two on the right. As I resize the browser window, the images scale accordingly. The issue arises when viewing my layout in Chrome: the image positions shift as I resize the browser, unlike Safari and Firefox ...

htmlcssfirefoxgoogle-chromesafari