Tailwindcss 3 fails to start on Windows 10 operating system

Let me share my experience:

When I installed tailwindcss on my PC with Ubuntu Linux at home, it worked seamlessly.

However, when I tried to set it up on my Windows 10 machine at work, it just refused to cooperate. I am really eager to kick off a new project using tailwindcss!

Here is the issue I encountered (when running npx tailwindcss init):

PS C:\Bitnami\wampstack-7.4.22-0\apache2\htdocs\b&t-cambio\wp-content\themes\btcambio> npx tailwindcss init
't-cambio\wp-content\themes\btcambio\node_modules\.bin\' it is not recognized as an internal or external command, operable program, or batch file. 
node:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module 'C:\Bitnami\wampstack-7.4.22-0\apache2\htdocs\tailwindcss\lib\cli.js'
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

I made sure that NPM is included in my PATH and it is. I have used npm many times before without any issues.

My current versions for npm, npx, and node are:

$ npm --version && npx --version && node --version
8.3.0
8.3.0
v16.13.1

I have scoured through various stackoverflow threads and forums regarding tailwindcss problems, but unfortunately, I haven't found a solution yet.

If anyone here has insights into what might be causing this issue, please share your thoughts.

Right now, all I want is to use pure CSS alongside tailwindcss, without any preprocessors...

Answer №1

Well, it took me a good 10 hours to figure this out! I stumbled upon a solution for my problem in this particular question: Dealing with the 'autoprefixer' module error when using npx tailwindcss init -p command

The issue was related to the tailwind\lib\cli, so the workaround is to execute

npx tailwindcss-cli@latest init -p

During the initial run, you'll be prompted to install the required package. Once that's done, everything should work like a charm!

I also encountered a similar problem while following the instructions in the documentation (step 4) regarding initiating the Tailwind CLI build process. Instead of using tailwindcss, make sure to use tailwindcss-cli@latest for smooth operation.

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

Alteration of icon size in input field using jQuery unintentionally

My issue involves an input field where users can input text from an array of emojis. When a user selects an emoji, it should display as an icon styled by an external stylesheet. However, there are two problems: The name of the icon appears on top of the ...

Ensure text is neatly enclosed within bs4 containers

I'm encountering a significant issue with my bs4 boxes that I can't seem to resolve. The primary concern is that when the browser size falls between 600-767.98px and 768-991.98px (as per Dreamweaver), the text within the middle three boxes fails ...

Steps for modifying material-ui timepicker to display time in a 24-hour format

Presently, I am utilizing a Timepicker from material-ui. It is currently configured with type="time", allowing me to select times throughout the day in 12-hour increments with an AM / PM choice. However, I wish to adjust my picker to a 24-hour format, elim ...

The issue persists with the flex item not occupying the full height of the screen despite using "align-items: stretch"

When using flex-direction: row; on the body element, I expect that setting align-items: stretch; will vertically stretch the child item to fill the screen height. However, for some reason this is not happening. Below is a simple example of what I am tryin ...

An error occurred while parsing JSON: `Unexpected ending near "ma-sauce-launcher":"*`

After executing the command ">ng new angular-app" on Windows, I came across the following error: npm ERR! Unexpected end of JSON input while parsing near '...ma-sauce-launcher":"*' Package installation failed, please refer to the above error ...

Do I have to implement a column grid for creating responsive websites?

I'm feeling a bit uncertain about the necessity of a column grid for creating a responsive website. For instance, I plan to kick off with the Bones WordPress theme. My intention is to utilize the SCSS setup provided in this theme. The grid it offers i ...

Azure DevOps - npm unseen

I am facing an unusual issue with a deployment pipeline on Azure DevOps. There are two tasks involved: 1) Installing packages 2) Running npm with the installed packages The process seems straightforward. Here is what I have been doing: 1) Using a Comm ...

The HTML code does not seem to be acknowledging the CakePHP link

When using Cakephp to generate a link with Html->link, the code looks like this: echo $this->Html->link('Download',array( 'plugin'=> 'galleries', 'controller'=> 'galleries', 'a ...

Dynamic parallax effect with scroll wheel on WebKit

Currently experiencing some challenges with parallaxing backgrounds. I developed a website for an event organized by my friends, featuring multiple background images that shift between content sections to create a parallax effect. I have implemented code t ...

Encountering notifications and issues pertaining to conflicting dependencies after integrating the angular-oauth2-oidc dependency into the package.json file

I am currently working on an Angular project and wanted to share my package.json file for reference: { "name": "angular.io-example", "version": "0.0.0", "description": "Example project from ...

Hey there, I'm looking to use different CSS fonts on Windows and Mac for the same page on a web application. Can someone please guide me on how to accomplish this?

In order to tailor the font based on the operating system, the following criteria should be followed: For Windows: "Segoe UI" For Mac: "SF Pro" Attempts have been made using the code provided below, but it seems to load before the DOM and lacks persisten ...

If you are using Windows 10 and encountering issues with npm and Babel, please attempt to rerun the

error identifier npm install --save-dev css-loader style-loader We recommend executing this command as an administrator to resolve the issue. ...

Unable to Locate CSS File for MAVEN Web Project Using JSF

https://i.sstatic.net/I5vKT.png What is the correct way to reference it in XHTML? I have seen conflicting information online - some say the file should be placed as shown in the image above, while others mention needing to map resources in servlet-config. ...

Having trouble with NPM's global command installation due to a proxy issue?

Hey, I recently installed Node JS version 10 and Npm version 6 on my system. When I attempt to run the command npm install -g yarn I encounter an error message https://i.sstatic.net/XIP4x.png To troubleshoot, I searched for commands to add a proxy: np ...

What is the process for creating a unique angular module using npm?

I've successfully created and published an npm module. Now, I'm facing issues in integrating it into my app using webpack to compile the angular universal setup. For Angular universal repository: https://github.com/angular/universal-starter/tre ...

Tips for adding a gradient to your design instead of a plain solid color

I stumbled upon a snippet on CSS Tricks Attempting to replace the green color with a gradient value, but unfortunately, the value is not being applied. I have tried using both the fill property and gradient color, but neither has been successful. Here is ...

Node Express app issue: Only one page is not having CSS applied

I've been working on a node application that utilizes Handlebars.js (hbs) as the html templating language. In my project, I have a CSS file stored in a public folder. The .hbs files within the 'views' folder successfully link to this CSS fil ...

Swipe horizontally on mobile devices with text scrolling

I stumbled upon a workaround online that effectively allows for horizontal scrolling on mobile devices. <div style="max-width: 1024px; margin: auto; "> <ul style="white-space: nowrap; overflow-y: hidden; overflow-x: scroll; -webkit-overflow-sc ...

The advantages and disadvantages of utilizing various methods to visually enhance HTML elements with JavaScript

After opening one of my web projects in IntelliJ, I noticed some JavaScript hints/errors that Netbeans did not detect. The error message was: > Assigned expression type string is not assignable to type CSSStyleDeclaration This error was related to thi ...

Leveraging the Request npm package synchronously within Meteor 1.3

In my Meteor 1.3.2.4 project, I tried utilizing the synchronous features of the request npm package. I initially followed the instructions provided in this guide article from Meteor and attempted to use Meteor.bindEnvironment. Here's the code: impor ...