Node.js+EJS模板集成Tailwind CSS遇问题：未检测到工具类

针对你遇到的Tailwind CSS类不生效、构建时提示“warn - No utility classes were detected in your source files”的问题，按以下步骤排查修复：

1. 修正Tailwind配置文件的内容扫描路径 #

你的tailwind.config.js中content字段只指定了./views/*.ejs，但项目里的header.ejs、footer.ejs在views/partials子文件夹下，Tailwind无法扫描到这些子目录里的文件。修改配置，让它覆盖所有views目录下的EJS文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./views/**/*.ejs"], // 双**匹配所有子目录
  theme: {
    extend: {},
  },
  plugins: [],
}

2. 确保CSS入口文件与构建脚本配置正确 #

• 在css目录下创建input.css文件，写入Tailwind的基础指令：

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

• 在package.json中添加正确的Tailwind构建脚本：

"scripts": {
  "build:css": "tailwindcss -i ./css/input.css -o ./public/css/output.css --watch"
}

这个命令会把编译后的CSS输出到public/css目录下，符合你Express项目的静态文件配置。

3. 在EJS模板中引入编译后的CSS #

在views/partials/header.ejs里添加link标签，引入编译好的output.css：

<head>
  <meta charset="UTF-8">
  <title>项目标题</title>
  <link rel="stylesheet" href="/css/output.css">
</head>

4. 重新运行构建与服务 #

• 先执行Tailwind的构建监听命令：npm run build:css
• 再启动你的Node.js服务：node app.js

这样Tailwind就能正确扫描到所有EJS文件中的工具类，生成对应的CSS样式，页面上的Tailwind类就能生效了。

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