Tailwind CSS在Gatsby默认示例中可用，但在gatsby-starter-blog中失效

确认Tailwind配置完整迁移 #

• 检查新项目根目录是否存在tailwind.config.js，配置需覆盖Gatsby项目的所有源码路径，包括starter-blog的markdown内容路径：

  module.exports = {
    content: [
      "./src/**/*.{js,jsx,ts,tsx}",
      "./content/**/*.mdx"
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

• 确保postcss.config.js配置正确，让PostCSS能处理Tailwind指令：

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

检查全局样式导入 #

• 确认gatsby-browser.js中已导入全局样式文件：

  import "./src/styles/global.css"
  

• 全局样式文件src/styles/global.css必须包含Tailwind核心指令：

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

排查Layout组件样式冲突 #

• 检查你复制的layout-index.js组件，是否存在自定义CSS（如内联样式、全局类）覆盖了Tailwind样式。
• 确认组件根元素未使用会影响优先级的样式属性，确保Tailwind类名能正常生效。

清除缓存重新构建 #

• 执行命令清除Gatsby缓存并重启项目，避免旧缓存导致的样式异常：

  gatsby clean && gatsby develop
  

你的index.js代码写法无问题，Tailwind类名使用正确，问题基本出在新项目的Tailwind配置或样式导入环节，按上述步骤逐一验证即可解决。

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