DevHelp Hub

A Comprehensive Step-By-Step Guide on Integrating TailwindCSS with NodeJS, Express and EJS

A Comprehensive Step-By-Step Guide on Integrating TailwindCSS with NodeJS, Express and EJS

Muhammad Faizan Soomro's photo
Muhammad Faizan Soomro
·

4 min read

Table of contents

In this tutorial, you will learn how to integrate TailwindCSS with Node.js, Express, and EJS.

  1. Project setup

The first step is to create and set up our application.

Run the following commands to create the nodeJS directory and change the current working directory to it:

mkdir nodeJS
cd nodeJS

Now we need to initialize our Node project. To do so, execute the following command:

npm init

The objective of npm init is to generate the package.json file which is used to contain project metadata (e.g., name, description, version, author, etc.) and to manage project dependencies and scripts.

When you run the program, you will be presented with an interactive prompt where you may enter details about your project. If you are satisfied with the suggested information, hit enter until the end.

Alternatively, you can run:

npm init -y

Here the -y flag is equal to you pressing enter until the end without adding any information i.e. going with the default settings.

  1. Enabling ECMAScript modules in Node.js

The ECMAScript modules (in short ES modules) is a JavaScript modules format that uses import and export statements. The default format of modules in Node.js is CommonJS. To enable ES modules, add the following line in the package.json file.

"type": "module"

  1. Installing all dependencies

Run the following command to install all dependencies:

npm install express ejs; npm install -D tailwindcss

  1. Setting up TailwindCSS

Create a new directory and files for CSS.

On Mac : mkdir public; mkdir public/styles; touch public/styles/input.css; touch public/styles/style.css
On Windows : mkdir public; mkdir public/styles; ni public/styles/input.css; ni public/styles/style.css

The TailwindCSS is stored in the input.css file, while the final CSS used by our website is stored in the style.css file.

Add the following code in input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

The code above injects TailwindCSS's base, components, and utility styles into our CSS. At runtime, these directives are transformed into real CSS.

  1. Setting up EJS file

Create a new directory, and an EJS file, as follows:

On Mac : mkdir views; touch views/index.ejs
On Windows : mkdir views; ni views/index.ejs

NOTE: make sure to name the folder as ‘views’ because by default express is going to look for the folder with this name.

Now add content to your index.ejs file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/styles/style.css">
    <title>Share</title>
</head>
<body>
    <h1 class="text-3xl text-purple-700">KEEP CODING</h1>
</body>
</html>

  1. Creating basic server

Create the index.js file, which contains our basic server.

You can do it manually, but it will look more cool if you use the terminal :D (I would recommend using the terminal to tighten your grip on it).

On Mac : touch index.js
On Windows : ni index.js

Now create the server and set up static files. Copy the following code in your index.js

import express from "express";
const app = express();
const port = 3000;
app.use(express.static("public"));
app.get("/",(req,res)=>{
    res.render("index.ejs");
})
app.listen(port);

  1. Generating TailwindCSS configuration file

npx tailwindcss init

The tailwind.config.js file is created as a result of this. This file's purpose is to allow you to personalize your TailwindCSS installation. It's a configuration file where you may add extra information like plugins, themes, margins, padding, and whatever else Tailwind doesn't offer.

Now add the paths to all of your ejs files in your tailwind.config.js file. Copy the following code in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./views/*"],
  theme: {
    extend: {},
  },
  plugins: [],
}

  1. Last Step:

In your package.json file under scripts, add the following line:

"css": "tailwindcss -i ./public/styles/input.css -o ./public/styles/style.css --watch"

With the above command, we build the CSS and add it to the styles.css file, which is used by our website.

How to run?

Run the following code in your terminal:

npm run css

Then open another terminal without closing the previous one and run your server.

nodemon index.js

NOTE: assuming that you know about nodemon, otherwise visit here.

Finally, open the website localhost:3000 and your website is READY!

Now, just leave the second terminal as it is and go back to the first one. Open your index.ejs file and make any changes to the style of H1 and save it. You will see some updation in the terminal just ignore it and refresh your website. BOOM NEW STYLES HAVE BEEN ADDED!

Conclusion:

You should now have a fully functional Node.js application using Express, Pug, and TailwindCSS.

Tailwind CSSNode.jsExpressejsCSS