I am using NodeJs, TailwindCSS, and ExpressJS to build a personal website. I am pretty new to this. I have an index.ejs file:
<!DOCTYPE html>
<html>
<head>
<title><%= data.title %></title>
<!-- Include Tailwind CSS -->
<link href="../assets/styles.css" rel="stylesheet">
<!-- Include Custom CSS -->
<link href="../assets/custom.css" rel="stylesheet">
</head>
<body class="custom-bg">
<!-- Header & Navbar -->
<%- include('partials/header') %> </header>
<div> <%- include('partials/user-card') %> </div>
<%- include('partials/footer') %>
</body>
</html>
My navbar and custom background both work but when I try to add main content beneath the navbar the TailwindCSS I apply in the other user-card.ejs file does not work at all. I am not sure where I am going wrong here and have been troubleshooting for a while. Any help would be appreciated. Attached is a picture of my webpage. I am trying to style the “Hello World”.
I have tried removing my header file from the index.ejs file and just having a single body tag with no background but I still cannot style anything inside the body.
a-personal-website
├─ .DS_Store
├─ README.md
├─ assets
│ ├─ custom.css
│ └─ styles.css
├─ package-lock.json
├─ package.json
├─ public
│ └─ images
│ ├─ background.jpeg
│ └─ cat.jpeg
├─ server.js
├─ styles
│ └─ tailwindcss.css
├─ tailwind.config.js
└─ views
├─ about.ejs
├─ contact.ejs
├─ index.ejs
├─ partials
│ ├─ background.ejs
│ ├─ footer.ejs
│ ├─ header.ejs
│ └─ user-card.ejs
└─ projects.ejs
Server.js:
const express = require('express');
const app = express();
const port = 8008;
const path = require('path');
const tailwindConfig = require('./tailwind.config');
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
app.use(express.static(path.join(__dirname, 'public')));
app.use('/assets', express.static('assets'));
8