如何在 Express JS 和 EJS 模板中使用 tailwind？

Question

我正在尝试为我的项目使用 tailwind，但我正在使用 ExpressJS 和 EJS 作为视图引擎，但它不起作用，有任何指南吗？

我的app.js文件

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

我的homepage.ejs文件

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

服务器运行成功

用于生成 tailwind 文件的命令

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

我的项目结构：

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

tailwind.config.js配置

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

homepage screenshot

Answer 1

我认为这不起作用，因为您没有在 Express 应用程序中公开 dist 文件夹。

确实，您公开了 src 文件夹，但没有公开包含您的样式的 dist 文件夹。

此外，您确实公开了 src 文件夹，但没有公开视图！我认为您的 Express 应用程序向您显示 src 文件夹中的 index.html 页面，而不是呈现 EJS。

基于this demo repository with Pug，我建议您在 Express 入口点进行这些更改。

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

然后 link 您认为 CSS，<link href="/output.css" rel="stylesheet" />

此外，如果您以后希望添加更多视图，我建议添加一个通配符，这样它就可以获取视图文件夹中的每个 .ejs 文件。

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

您可以在此处查看更深入的文章，https://daily.dev/blog/how-to-use-tailwindcss-with-node-js-express-and-pug。它适用于 Pug，但您只需将每个 pug 替换为 ejs 即可。

希望对您有所帮助！

如何在 Express JS 和 EJS 模板中使用 tailwind？

How to use tailwind with ExpressJS & EJS template?

css

express

ejs

tailwind-css