How to use tailwind with ExpressJS & EJS template?

I'm trying to use tailwind for my project, But I'm using ExpressJS, and EJS as a view engine, but It is not working, any guide?

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");
});

My homepage.ejs file

<!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>

Server is running successfully

Command used to generate the tailwind file

  npx tailwindcss -i ./src/style.css -o ./dist/output.css --watch

My Project structure:

Project/
    -- node_modules
    -- src/
       -- index.html
       -- style.css
     -- views/
        -- homepage.ejs

tailwind.config.js configuration

module.exports = {
  content: [
    "./src/*.{html,js,css} ",
    "./views/homepage.ejs",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    {
      tailwindcss: {},
      autoprefixer: {},
    },
  ],
};

homepage screenshot

Solution

I think this doesn't work because you didn't exposed the dist folder in your Express app.

Indeed, you expose the src folder but not the dist folder that contains your styles.

Also, you did exposed the src folder but not the views ! I think that your Express app is showing you the index.html page from the src folder instead of rendering the EJS.

Based on this demo repository with Pug, I suggest you to do these changes in your Express entry point.

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();
const path = require("path");

app.use(bodyParser.urlencoded({ extended: true }));

// => Here we expose the views so it can be rendered.
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// => Here we expose your dist folder
app.use(express.static(path.join(__dirname, 'dist')))

app.get("/", (req, res) => {
  res.render("homepage");
});

app.listen(port, (req, res) => {
  console.log("Server running");
});

and then link the CSS in your view, with <link href="/output.css" rel="stylesheet" />

also, if you wish to add more views in the future, I'll suggest to add a wildcard so it takes every .ejs file in the views folder.

module.exports = {
  content: [
    "./src/*.{html,js,css}",
    "./views/*.ejs",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    {
      tailwindcss: {},
      autoprefixer: {},
    },
  ],
};

You can see a more in depth article here, https://daily.dev/blog/how-to-use-tailwindcss-with-node-js-express-and-pug. It is for Pug, but you just need to replace every pug by ejs and you're done.

Hope it helps !