动态路由下Tailwind CSS在Node.js+EJS博客中样式不生效问题

核心原因 #

静态路由/post能正常加载样式，但动态路由/post/:topic失效，本质是CSS文件的相对引用路径错误。当访问嵌套路由（如/post/my-first-post）时，浏览器会从/post/目录下查找CSS文件，而非网站根目录，导致样式文件404加载失败。

解决方案 #

1. 改用绝对路径引用CSS文件 #

检查你的header.ejs组件中CSS的引用代码，将相对路径改为以/开头的绝对路径：

错误示例（相对路径）：

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

正确示例（绝对路径）：

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

这样无论当前路由层级如何，都会从网站根目录加载CSS文件。

2. 确认Express静态资源配置正确 #

确保你的Node.js代码中已正确配置静态资源目录，比如将public设为静态资源文件夹：

// 放在路由配置之前
app.use(express.static('public'));

假设你的Tailwind编译后的CSS文件存放在public/styles.css，此时/styles.css就能被正确访问。

3. 额外检查Tailwind配置（可选） #

如果上述操作后仍未生效，确认Tailwind配置文件（tailwind.config.js）中已包含post.ejs及组件文件的路径，确保Tailwind能扫描到这些文件中的样式类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./views/**/*.ejs", // 覆盖所有views下的ejs文件
    "./views/partials/*.ejs"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

验证方法 #

访问动态路由时，打开浏览器开发者工具（F12），切换到Network标签，查看CSS文件的请求状态：

• 如果显示404，说明路径错误，按上述方法修正即可；
• 如果显示200，再检查Tailwind配置是否覆盖了所有模板文件路径。

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