node.js express web-deployment tailwind-css

Does Tailwind CSS work with express sendFile?

I am trying to send a html file through express but it is not able to include tailwindcss

I did all the set up correctly (at least that's what I think)

Is sendFile not capable of sending tailwindcss

This is the express setup

// express setup
const app = express();
const port = 9000;
app.use('/static', express.static('static'))

the endpoint

app.get("/", (req, res)=>{
    res.sendFile(path.join(__dirname, "/template/home.html"))
});

html 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" />
    <title>Website</title>
    <link rel="stylesheet" href="../static/output.css" />
  </head>
  <body>
    <h1 class="text-sm">Doesn't Works</h1>
  </body>
</html>

css file

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind config file

module.exports = {
  content: ["*"],
  theme: {
    extend: {},
  },
  plugins: [],
}

and yes the path are correct it works with normal css but not with tailwindcss

I also don't want to use pug for it

Is there a way around it?

Solution

You can simple Use the Play CDN to try Tailwind right in the browser without any build step.

Add the Play CDN script tag to the <head> of your HTML file, and start using Tailwind’s utility classes to style your content.

But remember :

The Play CDN is designed for development purposes only, and is not the best choice for production.

<script src="https://cdn.tailwindcss.com"></script>

Folder & file structure :

app.js

const express = require("express");
const path = require("path");
const app = express();
const port = 9000;

app.use(express.static("./public"));

app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname, "/public/home.html"));
});

app.listen(port, () => {
  console.log(`Server is  listening at http://localhost:${port}`);
});

home.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Express & TailwindCss</title>
  </head>
  <body>
    <div class="flex items-center justify-center h-screen flex-col gap-5">
      <h1 class="text-5xl font-bold underline text-green-500">
        Express with TailwindCss
      </h1>
      <h3 class="text-blue-900 text-3xl font-bold">It does works! ;-)</h3>
    </div>
  </body>
</html>

Output :