1

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

enter image description here

Gnana Harish
  • 23
  • 5

2 Answers2

3

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: [],
};
accurates
  • 46
  • 1
0

You have to modify the content: ["./views/*.ejs"] to content: ["./views/**/*.{ejs}"] as your project directory structure clearly indicates your views folder have a sub-folder in it and this sub-folder is the one having the ejs file inside it.

Jyotirmoy
  • 45
  • 1
  • 11