HUMANKODE.

Hot Reload Tailwind 4 Without a Framework

Hot Reload Tailwind 4 Using Nodemon & Browser-Sync

Published by Carlo van Wyk on April 11, 2025 in Tailwind

Hot Reload Tailwind 4 Without a Framework
Hot Reload Tailwind 4 Without a Framework

If you’re building a lightweight project without a full framework and want to use Tailwind 4 with hot reloading, this guide will help you set up a dev workflow using nodemon, browser-sync, and postcss-cli.

Step 1: Install NPM packages

We’ll start by installing the Tailwind, PostCSS and CSSNano npm packages.

bash
npm init -y
bash
npm i -D tailwindcss @tailwindcss/postcss postcss cssnano
  • tailwindcss: This is the core Tailwind CSS framework that you’ll use to build your utility-first styles.
  • @tailwindcss/postcss: This ensures Tailwind integrates smoothly with PostCSS. It’s useful when working with PostCSS plugins or tools that expect standard PostCSS configuration.
  • postcss: A CSS processor that allows you to use plugins to transform your CSS (e.g., for minification). Tailwind works through PostCSS to generate the final stylesheet.
  • cssnano: A PostCSS plugin that minifies your CSS for production. It reduces file size by removing unnecessary whitespace, comments, and optimising styles.


Then install postcss-cli

bash
npm i -D postcss-cli
  • postcss-cli: A command-line tool to run PostCSS directly in your scripts. You’ll use this to process the tailwind.css file into a final, usable index.css.

Finally, I'll install browser-sync, nodemon and npm-run-all.

bash
npm i -D browser-sync nodemon npm-run-all

These are the dev server & automation tools.

  • browser-sync: A development server that automatically reloads your browser when files change. It watches for HTML, CSS, and JS updates and injects them into the browser without a full refresh.
     
  • nodemon: Originally built to restart Node.js apps on file changes, here we’ll use it as a file watcher that triggers the Tailwind build process whenever the source CSS (tailwind.css) changes.
     
  • npm-run-all: This tool lets you run multiple npm scripts in parallel or sequentially, making it easier to manage complex script workflows like building CSS and starting the dev server at the same time.

Step 2: Create a tailwind.css file

src/tailwind.css
@import 'tailwindcss';

h1 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

Step 3: Create a index.html file

src/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hot Reloading Tailwind</title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body class="flex items-center justify-center bg-white">
    <div class="w-full text-center px-4 mt-32 max-w-screen-md">
      <h1 class="font-default leading-none m-0 text-5xl font-bold dark:text-gray-400">Hot Reloading Tailwind 👋</h1>
    </div>
  </body>
</html>

Step 4: Update package.json with Scripts

package.json
{
...
  "scripts": {
    "build": "postcss src/tailwind.css -o src/index.css --env production",
    "serve": "npm run build && npm-run-all --parallel watch:styles serve:dev",
    "watch:styles": "nodemon --watch src/tailwind.css --watch src/index.html --exec \"npm run build\"",
    "serve:dev": "browser-sync start --server 'src' --files 'src/index.css, src/index.html'"
  }
...
}

Step 5: Create a postcss.config.js File

postcss.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/postcss'),
    require('cssnano')({ preset: 'default' }),
  ],
};

Step 6: Start the Hot Reloading Server

bash
npm run serve
Hot Reloading Tailwind 4
Hot Reloading Tailwind 4

Conclusion

You now have a fully working Tailwind 4 setup with hot reloading using nodemon and browser-sync. This lightweight workflow is perfect for quick prototypes, static sites (using 11ty or Hugo), or smaller projects where you don’t want the overhead of a full framework or build tool like Vite or Webpack.

Code

Clone the Github repository: https://github.com/thecarlo/tailwind-4-hot-reload