Local installation vs Publish on Netlify: How "npm install" and "npm run build" work

When you run:

npm install

npm install installs all dependencies listed in package.json into the node_modules directory on your local system.

npm run build is a shortcut for running the build script defined in the repo’s package.json file.

When you execute:

npm run build

npm looks inside package.json, locates the build script, and runs the command it specifies. This makes npm run build essential — it’s what creates the actual stylesheet your website uses.

An example of what it does in practice — when installing a repo locally:

  1. npm install → Downloads all build tools into node_modules.

    npm i (short for npm install) recreates the full development environment for a project. npm reads the package.json file to determine which dependencies and devDependencies are required, then downloads all of those packages — including Tailwind CSS, PostCSS, Autoprefixer, and build tools like Vite or Webpack, plus all nested dependencies.

    These files are placed into the node_modules folder, which can contain thousands of files needed to build or run the project locally. npm also creates or updates package-lock.json to record the exact versions installed, ensuring every future installation reproduces the same environment.

    In short, npm i = “install everything this project depends on so it can run and build exactly as intended.”

  2. npm run build → Creates a production version of your site:

    • Compiles Tailwind (final CSS goes into dist/ or public/)
    • Outputs everything into a deployable folder (dist, public, etc.)

Deploying on Netlify: the same commands are run automatically as part of the deploy procedure

First of all: on GitHub or Netlify, you do not upload or commit your node_modules/ folder. Netlify installs all dependencies automatically during its build process. It does not need or use your local node_modules — it generates its own.

The node_modules folder contains thousands of generated packages, which would make a repository extremely large. Netlify behaves exactly like your local machine when it builds your project.

And second: change the following code in your package.json file: 

                
"build": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"

And change it into: 

                
"build": "tailwindcss -i ./src/input.css -o ./dist/output.css"

--watch — Rebuild automatically Tailwind watches your project for changes. Every time you edit an HTML or CSS file, Tailwind automatically regenerates output.css.

The line "build": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch" tells Tailwind to take your source CSS file (src/input.css), process it, and generate the final compiled stylesheet in dist/output.css. The problem on Netlify is the --watch flag: it keeps the build process running forever, waiting for file changes. Netlify expects the build to finish and exit, but --watch never stops, so the deployment hangs or fails. For Netlify, the build script must run once and exit—so you should remove --watch

When Netlify deploys:

  1. It pulls your repo from GitHub
  2. Runs npm install
  3. Re-creates node_modules on the server
  4. Runs your build command (if set)

Configuring "npm run build" on Netlify

To configure the build process, Netlify requires two settings during site deployment: the Build command and the Publish directory.

When your site is connected to GitHub, Netlify detects that the project uses Node and prepares a build environment. To enable a proper Tailwind or bundler build, open your site in the Netlify dashboard and go to:

Site Configuration → Build & deploy → Build settings

In the Build command field, enter:

npm run build

This tells Netlify to install all dependencies (via npm install) and then execute the build script from your project's package.json. This script typically compiles Tailwind CSS, processes PostCSS plugins, and bundles or optimizes assets.

Next, Netlify needs to know where your final static files are output. This is the Publish directory. For Tailwind, Vite, or Webpack projects, this is usually:

  • dist/
  • build/

If your project does not generate a separate build folder and serves files directly from the repository root, set the publish directory to: 

/

Once these two fields are configured, Netlify will run the full build pipeline on every deployment, ensuring your Tailwind CSS and other assets are compiled and production-ready.