使用gatsby-node创建动态页面时Tailwind CSS类无法生效

问题原因 #

Tailwind的JIT模式会通过扫描指定文件提取用到的CSS类，默认配置通常只覆盖pages和components目录，没包含src/templates/，导致动态模板里未在其他组件/页面用过的类不被识别。

解决方案 #

• 更新Tailwind配置：打开tailwind.config.js，在content数组中添加templates目录的文件路径，让Tailwind能扫描到模板里的类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,jsx,ts,tsx}",
    "./src/components/**/*.{js,jsx,ts,tsx}",
    "./src/templates/**/*.{js,jsx,ts,tsx}", // 新增这行，覆盖所有模板文件
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

• 清理Gatsby缓存：旧缓存可能导致Tailwind未更新扫描结果，执行以下命令后重新构建：

gatsby clean
gatsby develop

• 检查文件扩展名：确保模板文件的扩展名（如.jsx、.tsx）和Tailwind配置content数组里的规则匹配，避免漏扫。

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