How to use Tailwind CSS with Node Js and EJS Template

Question

Im trying to use tailwindcss with nodejs and ejs template, but its not working (adding tailwind css classes to the tages are not reflecting) , whenever i try to build and watch my tailwind css it says warn - No utility classes were detected in your source files,

App.js

const express = require("express");
let ejs = require('ejs');
const app = express();
const path = require("path")

app.use(express.static(path.join(__dirname, "public")));
app.use(express.static(path.join(__dirname, "css")));
app.set("views", path.join(__dirname, "views"));
app.set("view engine", 'ejs');


app.get("/", (req, res)=> {

  res.render("index");

})



app.listen(3000, function(){
  console.log("Server is running on port 3000")
})

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./views/*.ejs"],
  theme: {
    extend: {},
  },
  plugins: [],
}

index.ejs

<%- include('partials/header.ejs'); %>
<h1 class="text-1xl">Hello World</h1>
<%- include('partials/footer.ejs') %>

Attached Image is the folder structure

Answer 1

Looks like the error is in your tailwind.config.js file. The 'ejs' is incorrectly formatted.

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./views/**/*.{html,js,ejs}"],
        theme: {
            extend: {},
        },
    plugins: [],
};