Configuring Tailwind and Nodemon

About Me

Hi there, I’m Kirstie. I’m a MERN stack developer taught through #100Devs. I'm hoping to give back to the tech community that has supported me, by writing articles as I continue my journey.

My First Portfolio Ready Full-stack Application

I've recently completed my first portfolio-ready full-stack application using Node.js, Express, EJS, Tailwind, and a bit of Alpine.js, which I'm obviously ecstatic about. 🎉

But there is something I stumbled across when I decided to use Tailwind along with Nodemon and I thought I'd share the problem and solution.

In the early days of setting up and whilst going through the steps of installing Tailwind, I quickly realised that I couldn’t run the Tailwind build process script at the same time as Nodemon. Eeek!!

I also realised I didn’t have a clue how to configure it. 😬

So off I went and with 'google' as my research ally and after a few wrong turns, I finally worked out what I needed was something called 'concurrently' which I then added to my package.json and et voilà!

Note: You can also use 'npm-watch' amongst others, but my research pointed me to this being the best option. If you really want to, you can also see the download trends for equivalent solutions and you will see concurrently as the top solution.

What's Nodemon and why do we need it?

Without Nodemon we would have to constantly stop and restart the node.js server to see any of the changes made by our editor, which is a bit of a pain right? Especially when you just want to get on with building your app. So in comes Nodemon… it cleverly monitors the Node.js app and when you save any changes it restarts the server for you.

Let's get back to 'concurrently'. What actually is it that?

Well, let me explain. According to the npm official description, it allows you to:

Run multiple commands concurrently. Like npm run watch-js & npm run watch-less but better.

In a nutshell, it allows you to run multiple scripts like the aforementioned nodemon and tailwind at the same time by adding a line to your package.json file. I’ll go through step by step how to configure Node to run multiple commands in the package.json using concurrently but with a focus on EJS, Tailwind, and nodemon.

So with all of that out of the way let's get started with installing Tailwind

How to install Tailwind with Node, Nodemon and EJS

The presumption is that nodemon is already installed and running. If not please go and install it, don't worry if you don't save it as a dev dependency as we will be changing this through the package.json later on.

npm install --save-dev nodemon

1. Go to the Tailwind website and retrieve the installation instructions, ensuring you have npm, node, nodemon, express, and EJS ( you can use any embedded javascript solution, I chose EJS in this instance ) installed on your machine.

2. Run the following commands in the terminal:

    npm install -D tailwindcss
   
    npx tailwindcss init
   

3. Open up the generated Tailwind config file and add the EJS path to ‘content’.

/** @type {import('tailwindcss').Config} */

module.exports = {

content: [

"./public/*.{html,js,css}",

"./views/*.ejs",

"./views/layouts/*.ejs",

"./views/partials/*.ejs"

],

theme: {

extend: {},

},

plugins: [],

}

In your styles.css add the following lines of code

@tailwind base;

@tailwind components;

@tailwind utilities;

1. Run the build once by running this line from the terminal.

• npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Installing 'concurrently'

So now that's all done, let's install 'concurrently' globally.

• npm i -g concurrently

Then add the following to your scripts in your package.json file. Note that concurrently is run as a dev dependency in this case (see below) and restart your server using npm run dev.

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js",
    "build": "tailwindcss -i ./public/styles.css -o ./public/output.css",
    "dev": "concurrently \"nodemon server.js\" \"tailwindcss -i ./public/input.css -o ./public/output.css --watch\" "
  }

Conclusion

And there we have it, concurrently will now allow Tailwind and nodemon to run at the same time, with nodemon watching for changes and restarting the server automatically, whilst Tailwind rebuilds in the background.