为何TailwindCSS无法应用到body标签内的元素？

核心原因大概率是Tailwind未扫描到你的partial文件 #

Tailwind的JIT模式会根据代码中实际使用的类生成CSS，如果user-card.ejs不在Tailwind的扫描范围内，里面的类就不会被编译到styles.css里，自然无法生效。

步骤1：检查并修改tailwind.config.js #

打开tailwind.config.js，确认content数组包含views目录下所有EJS文件，特别是partials子目录：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./views/**/*.ejs", // 递归扫描views下所有子目录的ejs文件
    "./views/*.ejs"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

如果之前仅配置了./views/*.ejs，partials里的文件不会被扫描，必须添加./views/**/*.ejs来覆盖子目录。

步骤2：确保Tailwind CSS正确重新构建 #

1. 检查package.json中的scripts，确认包含CSS构建命令：

{
  "scripts": {
    "build:css": "tailwindcss -i ./styles/tailwindcss.css -o ./assets/styles.css --watch",
    "start": "node server.js"
  }
}

2. 开发时需同时启动两个命令：
   • 终端1：npm run build:css（--watch会监听文件变化自动重新生成CSS）
   • 终端2：npm start（启动Express服务）
     若仅启动Express服务，修改partial后新的Tailwind类不会被加入styles.css。

步骤3：验证Partial的引入是否正确 #

确认index.ejs里正确引入user-card.ejs，语法需准确：

<%- include('partials/user-card') %>

注意使用<%-（直接输出HTML）而非<%=（会转义HTML），路径需与目录结构匹配。

步骤4：浏览器开发者工具验证 #

1. 打开浏览器控制台，找到user-card内的元素，查看class属性是否正确加载
2. 在Elements面板的Styles标签中，搜索对应的Tailwind类（比如text-red-500），若找不到类定义，说明Tailwind未编译该类，回到步骤1检查content配置。

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