EJS Template Engine with Tailwind CSS in Node.js
In this article, we will explore how to use the EJS template engine with Tailwind CSS in a Node.js application.
Setting up the project
First, let’s create a new Node.js project and install the necessary dependencies:
mkdir ejs-tailwind
cd ejs-tailwind
npm init -y
npm install express ejs tailwindcss
Creating the server
Next, let’s create a new file called server.js and set up a simple Express server:
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(`Server is running at http://localhost:${port}`);
});
Creating the EJS template
Now, let’s create a new file called index.ejs in a folder called views:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EJS Template Engine with Tailwind CSS</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@1.9.6/dist/tailwind.min.css" rel="stylesheet">
<!-- Custom styles can be added here -->
</head>
<body>
<div class="container mx-auto">
<h1 class="text-3xl font-bold text-center mt-10">Welcome to EJS with Tailwind CSS</h1>
<p class="text-center mt-4">This is an example of using EJS template engine with Tailwind CSS in Node.js</p>
</div>
</body>
</html>
Now, when you run the server by executing node server.js and navigate to http://localhost:3000 in your browser, you should see the EJS template with Tailwind CSS styles applied.
Conclusion
Using EJS template engine with Tailwind CSS in a Node.js application allows for easy and efficient creation of dynamic web pages with beautiful and responsive designs. With just a few simple steps, you can have a fully functioning web application up and running in no time.
Sir why I using express tailwind html it’s not work