Unable to run Tailwind CSS installation on M1 Mac devices seems to be a common issue

Having trouble installing Tailwind CSS on my 2020 MacBook Pro M1. Every time I attempt to install it using

npm install tailwindcss@latest

I encounter the following error:

npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '[email protected]', npm WARN EBADENGINE required: { node: '>=0.8 <=9' }, npm WARN EBADENGINE current: { node: 'v18.0.0', npm: '8.10.0' > } npm WARN EBADENGINE }

up to date, audited 968 packages in 4s

69 packages are looking for funding run npm fund for details

12 vulnerabilities (2 moderate, 7 high, 3 critical)

To address all issues, run: npm audit fix

Run npm audit for details.

I've tried running

npm audit fix

and

npm audit fix --force

Unfortunately, the issue persists. It appears that Tailwind may not yet support the M1 chip. Can I still proceed with using it? Appreciate any assistance provided.

Answer №1

It's merely a WARNING, not an outright error message.

npm WARNING EBADENGINE required: { node: '>=0.8 <=9' }

This indicates that the package expects you to have a version of Node.js between 0.8 and 9 installed.

npm WARNING EBADENGINE current: { node: 'v18.0.0', npm: '8.10.0' > }

However, it seems that you are currently using version 18 of Node.js. While this may cause some features of the package to not work as expected, it should still function properly.

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

Ways to change the row height of the dropdown list according to the information in the second column?

I utilized the selectMenu jQuery widget to create a dropdown list and then incorporated it into Angular to build a reusable dropdown component. The issue I am currently dealing with is related to the height adjustment of the columns within each row of the ...

Having trouble setting up a React project? Encounter a problem running webpack with npm

Currently, I am referencing the tutorial located at http://ccoenraets.github.io/es6-tutorial-react/setup/ in order to set up my React project. However, upon reaching the final stages and running the command npm run webpack The error message I'm enc ...

Include a JavaScript library from npm as a dependency in your Play 2.0 application

I'm currently working on integrating react-grid-layout into my play 2.0 web application. To begin, I came across the web jar for this library and added it to my build.sbt file. Here is how my sbt configuration looks like: libraryDependencies ++= Seq( ...

restore the HTML element to its initial position after being moved

I am utilizing document.getElementById('Droping1').style['-webkit-transform'] = translate(0px,'+Ground+'px)'; in order to relocate an HTML element. How can I return it to its original position for reusability without t ...

Ways to relocate the menu within the confines of the "menu border"

Is it possible to move the menu inside the border on this webpage? I am new to web design and was thinking of using position:absolute for the links. Should I also move the submenu along with it? Any suggestions on how to achieve this? Thank you! The goal ...

What is the best way to align the inner content to the left and right within a border-radius shape?

.intro h1{ font-family: 'Cambria'; font-size: 16pt; font: bold; text-align: left; } .intro p{ font-family: 'Calibri'; font:italic; font-size: 12pt; padding: 0px 690px 0px 20px; text-align: left; ...

The circular animation feature is malfunctioning in SVG files

My SVG animation dilemma: @keyframes rotate { 100% { -webkit-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); transform: rotateZ(360deg); } } .keepRotatingOne { -web ...

Does vuetify offer a card footer or card deck feature in its designs?

I'm trying to achieve a layout similar to this: https://getbootstrap.com/docs/4.0/components/card/#card-groups https://i.sstatic.net/HxKEh.png The goal is to keep the height of the box consistent even when the description varies Here's my code ...

What is the best way to verify HTML using RSS?

Looking to improve my skills in HTML/CSS/PHP development, I'm faced with a challenge when it comes to validating code that contains content beyond my control, such as an RSS feed. For instance, on my home page, which is a .php document containing bot ...

"Tailor your package installations based on the current version of your Node

My current project relies on the websocket package, with version 1.0.31 working for node 10.x but not for node 4.x which works with version 10.0.24 of websocket. Is there a way to specify different package versions based on the node.js version being used? ...

Guide to setting up npm openlpr in a Node.js environment

After attempting to install the npm node-openalpr package, I encountered an error. What steps can I take to resolve this issue? > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cba5a4afaee6a4bbaea5aaa7bbb98bfae5fae5fa">[e ...

What is the best way to stack columns on small screens in a single row?

While utilizing the default bootstrap col classes, I noticed that when I reduce the grid to mobile size, the columns span the entire width of the row. This results in a long vertical list of items on mobile devices, even though there is sufficient space on ...

Reset all modifications made by jQuery animations before initializing a fresh animation

Is there a way to reset the changes made to the first div before animating the second div using jQuery animation? $(".order-b").click(function(event){ $(".order-t").animate({top:'30%'}, "slow" ); }); $(".counsel-b").cl ...

Prettyprint XML in Angular 8+ without using any external libraries

I am working with Angular 8+ and I need to display XML content in a nicely formatted way on my HTML page. The data is coming from the backend (Java) as a string, and I would like to present it in its XML format without relying on any external libraries or ...

What is the best way to allocate a larger size to one part of a flex div?

A div is used to insert information <div class="inputs"> <div class="content">@Html.TextBoxFor(model => invoices.ProductDesc, new { disabled = "disabled", @readonly = "readonly" })</div> <div class="content">@Html.TextBo ...

Having trouble deploying the CSS files to Heroku platform

What's My Current Project? Currently, I am working on deploying a Django web application on the Heroku server. Encountered Issue I am facing difficulties in pushing CSS files to the Heroku server using git push heroku main. Interestingly, when ...

How can CSS be used to change the text color of input placeholder in Edge Browser?

While using Edge Browser, I encountered an issue where I was unable to change the input placeholder color. The :-ms-input-placeholder selector was not working on Edge, although it functioned properly on IE 10 and IE 11. input:-ms-input-placeholder { ...

Internet Explorer 11 encountering a flaw with absolute positioning

In my web page, everything looks good in Google Chrome, Firefox, and Opera, but I'm facing an issue with Internet Explorer 11. Here is the simplified HTML: <div class="container"> <div class="page-content"> <div id="corner ...

Setting up Scss and purgeCss configuration in Next.js custom postCSS configuration: A step-by-step guide

My current project is using Scss in combination with Bootstrap for design. I have implemented purgeCss to remove unused Css, and customized my postcss.config.js file as follows: module.exports = { plugins: [ "postcss-flexbugs-fixes", [ " ...

Choosing a dynamic button with Python and Selenium

I had been attempting to click on a button but was unsuccessful using various methods. This is how the source code appears: <div class="sc-fzXfPJ soOmg"> <button type="submit" class="sc-fzXfQu KbRNP SuiButton SuiButton--pr ...