I am facing a challenge in incorporating Tailwind CSS into my ExpressJS project using EJS as the view engine. Could anyone provide guidance on how to resolve this issue?
Below is a snippet from my app.js file:
require("dotenv").config();
const express = require("express");
const ejs = require("express");
const bodyParser = require("body-parser");
const port = 3000;
const dotenv = require("dotenv");
const app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.set("view engine", "ejs");
app.use(express.static(__dirname + "src"));
app.get("/", (req, res) => {
res.render("homepage");
});
app.listen(port, (req, res) => {
console.log("Server running");
});
In my homepage.ejs file, I have the following content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<link href="/dist/output.css" rel="stylesheet" />
<title>Document</title>
</head>
<body>
<h1 class="text-3xl font-bold underline">Hello world!</h1>
</body>
</html>
The server is up and running smoothly. To generate the Tailwind CSS file, I used the command:
npx tailwindcss -i ./src/style.css -o ./dist/output.css --watch
This is the structure of my project directory:
Project/
-- node_modules
-- src/
-- index.html
-- style.css
-- views/
-- homepage.ejs
For Tailwind CSS configuration, here is my tailwind.config.js setup:
module.exports = {
content: [
"./src/*.{html,js,css} ",
"./views/homepage.ejs",
],
theme: {
extend: {},
},
plugins: [
{
tailwindcss: {},
autoprefixer: {},
},
],
};