Setting Up Tailwind CSS v4.1 (CLI) with ExpressJS v5.1.0 and EJS (View Engine)

Step 1: Initialize a New Node.js Project

Run the following command to initialize a new Node.js project:

npm init -y

Step 2: Install Required Dependencies

Install the necessary dependencies using the commands below:

npm install tailwindcss @tailwindcss/cli
npm install express ejs

Step 3: Create Required Files and Folders

Create a public/css directory and add a file named input.css inside it.
Create a views directory for .ejs files and add a file named index.ejs inside it.
Create a file named index.js in the root directory.

Ensure that your files are structured exactly as described.

Step 4: File Contents

public/css/input.css:
```
@import "tailwindcss";
```

views/index.ejs:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/css/output.css" rel="stylesheet">
</head>
<body>
    <h1 class="text-3xl font-bold underline">
        Hello world!
    </h1>
</body>
</html>

index.js:

const express = require('express');
const app = express();
const port = 3000;

app.set("view engine", "ejs");
app.use(express.static('public'));

app.get('/', (req, res) => {
    res.render("index");
});

app.listen(port, () => {
    console.log(`Application is running on http://localhost:${port}`);
});

Step 5: Update `package.json` Scripts

Add the following scripts to the scripts section of your package.json file:

"scripts": {
    "watch:css": "npx @tailwindcss/cli -i ./public/css/input.css -o ./public/css/output.css --watch",
    "dev": "node index.js"
}

Refer to the package.json file for further clarification.

Step 6: Run the Application

Use two separate terminal windows to execute the following commands:

To configure Tailwind CSS:
```
npm run watch:css
```
To start the Express application:
```
npm run dev
```

Your application should now be up and running.

minkxx/steup-tailwindcss-with-express-ejs