Node.js+Express+EJS集成Tailwind CSS失效问题求助

以下是针对你遇到问题的具体修复步骤：

1. 修正Server.js文件内容 #

你贴出的Server.js内容是Tailwind配置代码，这是明显的复制错误。正确的Express服务器代码应包含静态资源托管配置（这是CSS能被访问的关键），示例如下：

const express = require('express');
const app = express();
const port = 3000;

// 设置EJS为视图引擎
app.set('view engine', 'ejs');
// 托管静态资源目录，让Express能访问assets下的CSS文件
app.use(express.static('assets'));

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

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

2. 修复Tailwind CSS配置文件 #

你的tailwind.config.js存在两处错误：plugins配置逻辑错误、content匹配冗余。修正后如下：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./views/**/*.ejs", // 匹配views目录下所有层级的EJS文件
    "./views/*.ejs"
  ],
  theme: {
    extend: {},
  },
  plugins: [], // 无额外插件时留空，tailwindcss和autoprefixer不属于此配置项
}

3. 添加PostCSS配置文件 #

在项目根目录新建postcss.config.js，用于配置Tailwind和Autoprefixer（这部分你之前错误放到了Tailwind配置里）：

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

4. 修正Package.json的构建命令 #

原命令的路径使用了绝对路径，且缺少开发环境监听命令，修正后：

{
  "name": "person-website",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "nodemon server.js",
    "build-tail": "tailwindcss build -i ./styles/tailwindcss.css -o ./assets/styles.css",
    "watch-tail": "tailwindcss -i ./styles/tailwindcss.css -o ./assets/styles.css --watch"
  },
  "author": "Thomas Murray",
  "license": "ISC",
  "dependencies": {
    "ejs": "^3.1.8",
    "express": "^4.18.2"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "nodemon": "^2.0.20",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.4"
  }
}

• 用相对路径替代绝对路径，确保文件能被正确找到
• 添加watch-tail命令，开发时可自动监听文件变化并重新构建CSS

5. 确保EJS正确引用CSS #

在index.ejs中，CSS的引用路径需对应静态资源配置：

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

6. 执行构建并启动服务 #

• 开发时：先运行npm run watch-tail自动构建CSS，再启动服务器npm start
• 生产构建：运行npm run build-tail生成最终CSS文件

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