Issue encountered while attempting to compress tailwindcss

I attempted to reduce the size of my tailwindCSS by creating a script in my package.json:

"tw:prod":"NODE_ENV=production npx tailwindcss-cli@latest build ./src/css/tailwind.css -o ./public/css/tailwind.css",

However, I encountered the following error:

> 'NODE_ENV' is not recognized as an internal or external command,
> operable program or batch file. npm ERR! code ELIFECYCLE npm ERR!
> errno 1 npm ERR! <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81eff5f6f1eef3f5c1b0afb1afb1">[email protected]</a> tw:prod: `NODE_ENV=production npx
> tailwindcss-cli@latest build ./src/css/tailwind.css -o
> ./public/css/tailwind.css` npm ERR! Exit status 1 npm ERR! npm ERR!
> Failed at the <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff918b888f908d8bbfced1cfd1cf">[email protected]</a> tw:prod script. npm ERR! This is probably
> not a problem with npm. There is likely additional logging output
> above.
> 
> npm ERR! A complete log of this run can be found in: npm ERR!    
> C:\Users\gabri\AppData\Roaming\npm-cache\_logs\2021-01-08T10_21_19_799Z-debug.log

This script is from tailwincss's documentation, so why am I facing this issue?

cssjsonnpmtailwind-css

Answer №1

For those utilizing a Windows operating system, it is essential to incorporate the win-node-env dev dependencies before proceeding to execute tw:prod:

npm install win-node-env

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

How to format line breaks and indentation for better viewing with MySQL's json.dump() method

I am currently working with code to extract and display data from my SQL database. Strangely, I have found that only one command has been successful in this process. json_string = json.dumps(location_query_1) My query pertains to the specific format in w ...

pythonmysqlsqljsonpython-3.x

The Alchemy feature on hover is not functioning

I am currently using alchemy.js to display a graph, but I am encountering issues with showing the "onMouseOver" caption of the graph's node. The console is displaying some errors which you can see here. Here is the code snippet: <html> < ...

javascripthtmljsononmouseoveralchemy

Using jQuery to replace the content of a div with a delay?

I am attempting to utilize jQuery to create a fade effect on an element, replace its innerHTML content, and then fade it back in once the new content has been added. I have successfully managed to replace the element's content using the .html() method ...

javascriptjqueryhtmlcssinnerhtml

Creating a div that displays only the initial 50 characters through CSS

My goal is to display only the first 100 characters of the Optional Clause in my card, but I'm running into problems with the CSS. The following 3 lines of code aren't working for me: white-space: nowrap; overflow: hidden; text-overflow: ellipsis ...

htmlcssstyling

Every time I configure react.js and import an external link (such as Material UI or Bootstrap React), the screen gets disabled and turns completely white

After setting up my react.js, I encountered an issue where importing bootstrap components such as Container, Row, Col causes the screen to turn white. It seems that HTML and CSS are being disabled, resulting in a completely blank web page. Any ideas on ho ...

reactjsnpmreact-hooksreact-bootstrapreact-error-boundary

Executing two select queries in PHP and transforming the results into JSON structure

Is there a way to retrieve two JSON objects using just one AJAX call in conjunction with a PHP function? This is an example of the HTML structure: // Bootstrap Modal <div id="paymentViewModal" class="modal fade"> <form method="POST" id=" ...

phpjsonajax

Issue with React-Native: Unable to locate and resolve 'react-navigation' module

Hey there, I'm currently working on developing an Android app using react-native. While incorporating react-navigation into the app, I encountered an error when running the program with npx react-native run-android. Error: Unable to resolve module `@r ...

reactjsreact-nativenpmreact-navigation

How come the cubic bezier timing function works flawlessly just on the first try when staggered transitioning element opacity over time with CSS and a touch of JS?

I'm currently working on a menu overlay that expands to fill the screen when a user clicks a button in the corner. I'd like the menu items to fade in one by one, similar to the effect used on this website: Most of the functionality is there, but ...

htmlcsscss-transitionsopacitycubic-bezier

The functionality of Jackson's JsonIgnore feature seems to be ineffective when used in

I am currently converting a Java Spring application to a Kotlin Spring application. Everything is working fine except for the API request to openweather. When storing DTO in the database, there is an id field alongside the cityId retrieved from the API ( ...

javajsonspringkotlinjackson

Introduce new material at the start of each line, akin to what ::before accomplishes for the initial line

I am currently working on customizing the appearance of my <code>/<pre> tags while ensuring that users can still easily highlight and copy the code. The method I had in mind (shown below) only applies to the first line and doesn't repeat ...

javascripthtmlcss

A guide on integrating API data with EJS templates in a Node.js application

Having trouble with my index.js file located in the root directory const express = require("express"); const app = express(); const path = require("path"); const axios = require("axios").default; const cors = require("cors"); app.set("view engine", "ejs"); ...

node.jsjsonweb-scraping

The font weight is failing to take effect

I'm having an issue with the font-weight in my CSS. On my website, I'm trying to decrease the font-weight but even the lightest weight (100) looks too heavy like this: https://i.stack.imgur.com/6dwFa.png However, I want it to look more like this ...

htmlcssreactjsfonts

It appears that Internet Explorer is still animating/processing my loading.gif despite being set to display:none

It seems that the issue I'm encountering is related to the inconsistent starting position of the loading.gif animation when performing an ajax request. In Internet Explorer, the animation appears to start from a random point, while in Firefox it alway ...

htmlcss

Is there a way to alter a class using ng-class only when the form is deemed valid?

I am trying to implement a feature where an input field shows as required, but once the user enters text, it indicates that the input is valid by changing the border color from red to green. I am facing an issue with this line of code always returning fal ...

javascripthtmlcssangularjs

Choosing the right jQuery selector to target a section that contains div elements

Whenever the h2 element within a section is clicked, I want all the fields in that section to be displayed. For example, if the user clicks on 'Contact Information', the three form inputs (fields) below the Contact Information heading should appe ...

javascriptjquerycss

Convert an array of JSON objects into a single JSONObject array

The example shows a JSONArray structured like this: [["title","details"],["abc","xyz"],["abc2","xyz2"]] I am looking for a way to convert it into an Array of JSONObject using Java or JavaScript, with the format shown below: [ { 'title': abc, ...

javajson

How can I center <text> within a button using Vue Native?

Is there a way to position the "login" text in the center of the button? I've attempted using align-items: center; and justify-content: center;, but it doesn't seem to be working <template> <view class="container"> <vi ...

cssvue.jsvue-native

I created some jQuery code that modifies a button when it is hovered over, however, I ended up writing the code individually for each button. What steps can I take to turn it

Is there a way to turn the code for each button on my website into a jQuery function that can be applied to any button? This is how the code currently appears: $(document).ready(function() { $("#linkXML").hover( function() { ...

javascriptjqueryhtmlcss

fetch data in json format from httpbin

I am trying to send my html form data as JSON by using an AJAX call to httpbin.org, but unfortunately, I'm not receiving the desired output. $("#contact").submit( $.ajax({ url: "http://httpbin.org/post", type:'POS ...

jqueryajaxjson

Uncertainty surrounds the interaction of computed height and margins with CSS float right

What is the reason behind this HTML code: <html> <head> <style type="text/css"> .left { background-color: yellow; } .right { float: right; background-color: lightgray; width: 150px; } </sty ...

csshtml