Tailwind CSS 是否与 express sendFile 一起使用？

Question

我正在尝试通过快递发送 html 文件，但它无法包含 tailwindcss

我正确地完成了所有设置（至少我是这么认为的）

是否sendFile无法发送tailwindcss

这是快速设置

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

端点

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

html 文件

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

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

tailwind 配置文件

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

是的，路径是正确的，它适用于正常的 css 但不适用于 tailwindcss

我也不想用pug

有解决办法吗？

Answer 1

您可以直接在浏览器中使用 Play CDN 试用 Tailwind，无需任何构建 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.

但请记住：

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

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

文件夹和文件结构：

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>

输出 :

Tailwind CSS 是否与 express sendFile 一起使用？

Does Tailwind CSS work with express sendFile?

web-deployment

node.js

express

tailwind-css