如何将 tailwind 与 ExpressJS 和 EJS 模板一起使用？

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

我的主页.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: {},
    },
  ],
};

Answer 1

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

事实上，您公开了

src

文件夹，但未公开包含样式的

dist

文件夹。

此外，您确实公开了 src 文件夹，但没有公开视图！我认为您的 Express 应用程序正在向您显示

index.html

文件夹中的

src

页面，而不是渲染 EJS。

基于此带有 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");
});

然后在视图中链接 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

即可完成。

希望有帮助！

Answer 2

将 Tailwind CSS 与 EJS（嵌入式 JavaScript）结合使用是一个简单的过程。 Tailwind CSS 是一个实用优先的 CSS 框架，EJS 是一个用于生成 HTML 标记的模板引擎。以下是您如何在 EJS 模板中使用 Tailwind CSS 类：

安装 Tailwind CSS：如果您还没有安装 Tailwind CSS，请使用 npm 或 YARN 等包管理器在项目中安装 Tailwind CSS。
```
npm install tailwindcss
```
设置 Tailwind 配置：通过创建配置文件来初始化和配置 Tailwind CSS。您可以通过运行来做到这一点：
```
npx tailwindcss init
```
这将在您的项目目录中创建一个
```
tailwind.config.js
```
文件。

创建您的 EJS 模板：在您想要使用 Tailwind CSS 类的位置创建 EJS 模板文件（例如

index.ejs

）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/path/to/your/tailwind.css" rel="stylesheet">
    <title>Tailwind + EJS</title>
</head>
<body>
    <div class="bg-gray-100 p-4">
        <h1 class="text-3xl font-bold text-blue-600">Hello, Tailwind CSS in EJS!</h1>
        <p class="mt-2 text-gray-700">This is a simple example of using Tailwind CSS with EJS.</p>
    </div>
</body>
</html>

将

/path/to/your/tailwind.css

替换为生成的 Tailwind CSS 文件的实际路径。您可以在 CSS 文件中使用

@tailwind

指令来包含 Tailwind 的样式。

或者为了不轻松：您可以创建一个单独的 ejs 文件名作为 path/header.ejs 的标头并将其用于其他文件。

渲染 EJS 模板：在 Node.js 应用程序中，使用

ejs

等模板引擎渲染 EJS 模板。

const express = require('express');
const app = express();
const ejs = require('ejs');

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    res.render('index');
});

app.listen(3000, () => {
    console.log('Server is running on port ${3000}`);
});

运行您的应用程序：使用
```
node
```
或任何其他首选方法启动您的应用程序。您可以通过在 Web 浏览器中访问来访问使用 Tailwind CSS 类渲染的 EJS 模板。

通过执行这些步骤，您将能够在 EJS 模板中使用 Tailwind CSS 类，从而使您可以轻松高效地设置内容样式。

如何将 tailwind 与 ExpressJS 和 EJS 模板一起使用？

问题描述投票：0回答：2

2个回答

最新问题

如何将 tailwind 与 ExpressJS 和 EJS 模板一起使用？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2