使用11ty与Tailwind时自定义配置失效问题求助

问题核心 #

自定义Tailwind配置（比如新增背景色）后背景变白，本质是Tailwind的摇树优化机制没检测到你在Markdown/Nunjucks文件中使用的自定义类，将其从最终CSS中移除了。纯Tailwind项目能正常运行，是因为默认扫描范围覆盖了所有用到类的文件，而11ty项目的源文件（md、njk）不在默认扫描路径里。

修复步骤 #

1. 修正tailwind.config.js的内容扫描范围 #

打开项目根目录的tailwind.config.js，更新content数组，让它覆盖src目录下所有Markdown、Nunjucks文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{md,njk,html}", // 匹配src下所有md、njk、html格式的文件
    "./_site/**/*.html" // 可选，覆盖11ty生成的静态文件，确保万无一失
  ],
  theme: {
    extend: {
      colors: {
        // 这里写你的自定义颜色，比如：
        customDark: '#2d3748'
      }
    },
  },
  plugins: [],
}

原配置大概率只包含了html文件，没覆盖md和njk，导致自定义类被判定为未使用而清除。

2. 确认构建脚本正确性 #

检查package.json中的脚本，确保11ty和Tailwind的构建/监听命令协同工作：

"scripts": {
  "dev": "eleventy --serve & npx tailwindcss -i ./src/input.css -o ./_site/style.css --watch",
  "build": "eleventy && npx tailwindcss -i ./src/input.css -o ./_site/style.css --minify"
}

这样能保证开发时文件修改后，11ty重新生成静态文件，Tailwind也会重新扫描并更新CSS。

3. 验证模板的CSS引入路径 #

确保_includes中的布局Nunjucks文件正确引入了生成的CSS，路径要对应_site目录下的输出文件：

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

额外排查项 #

• 删除_site目录后重新构建，避免增量构建的缓存影响样式更新。
• 检查src/input.css是否完整引入了Tailwind的核心指令：

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

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