如何在ExpressJS+EJS模板项目中正确配置使用Tailwind CSS

你的配置存在多处错误，按以下步骤逐一修改即可正常生效：

1. 修复 app.js 核心错误 #

现有代码存在3个明显问题：

• EJS 包引入错误，误写为 require("express")
• dotenv 重复引入
• 静态资源路径拼接缺少斜杠，且存放 Tailwind 编译产物的 dist 目录未被托管，浏览器请求 CSS 文件会直接返回404
  将 app.js 替换为以下内容：

require("dotenv").config();
const express = require("express");
const ejs = require("ejs");
const bodyParser = require("body-parser");
const port = 3000;
const app = express();

app.use(bodyParser.urlencoded({ extended: true }));
app.set("view engine", "ejs");
// 修复静态资源路径，同时托管src和dist目录
app.use(express.static(__dirname + "/src"));
app.use(express.static(__dirname + "/dist"));

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

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

2. 修复 tailwind.config.js 配置错误 #

现有配置存在2个问题：

• content 配置项第一个路径末尾带多余空格，会导致文件匹配失败
• plugins 配置错误，tailwindcss、autoprefixer 属于 PostCSS 配置项，不应写在 Tailwind 配置的 plugins 数组中，会引发编译异常
  将 tailwind.config.js 替换为以下内容：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js,css}",
    "./views/**/*.ejs"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

如果需要使用 PostCSS，单独在项目根目录新建 postcss.config.js，写入以下内容即可，不要混入 Tailwind 配置：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

3. 确认 Tailwind 入口文件内容 #

打开 ./src/style.css，必须在文件顶部写入 Tailwind 三个核心指令，否则编译输出的 CSS 文件为空，不会产生任何样式：

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

4. 修正 EJS 模板中的 CSS 引用路径 #

由于已经将 dist 目录设置为静态资源根目录，不需要在引用路径中带 /dist 前缀，将 homepage.ejs 中的 link 标签修改为：

<link href="/output.css" rel="stylesheet" />

5. 重启进程验证效果 #

• 终止当前运行的 Express 服务和 Tailwind watch 进程
• 重新执行 Tailwind 编译命令：npx tailwindcss -i ./src/style.css -o ./dist/output.css --watch，等待提示编译成功
• 重启 Express 服务
• 浏览器打开页面按 Ctrl+F5 强制刷新清缓存，即可看到 text-3xl font-bold underline 样式正常生效。

内容的提问来源于stack exchange，提问作者user16875752