网站部分Tailwind CSS样式不生效，但在Tailwind Playground中正常

针对你遇到的bg-lime-600这类样式在本地网站不生效、但Tailwind Playground正常的问题，可以按以下步骤排查：

• 确认Tailwind配置的content扫描范围
  Tailwind会根据tailwind.config.js里的content数组扫描文件，生成实际用到的样式类。如果你的footer所在HTML文件不在扫描路径内，Tailwind不会生成bg-lime-600的样式代码。确保配置包含目标文件路径：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      "./index.html",
      "./src/**/*.{html,js}",
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

• 重新运行CSS构建命令
  修改配置或新增样式类后，必须重新执行构建命令让Tailwind重新生成CSS文件。开发环境运行npm run dev，生产环境运行npm run build，确保新样式类被编译进最终CSS文件。

• 排查样式优先级冲突
  用浏览器开发者工具（F12）查看footer元素的样式面板，检查是否有自定义CSS规则（比如全局footer样式、第三方样式）覆盖了Tailwind的bg-lime-600。如果发现优先级更高的冲突规则，可以调整自定义样式的优先级，或临时给Tailwind类加!important测试：

  <footer class="!bg-lime-600">Lorem ipsum dolor sit</footer>
  

• 核对Tailwind版本
  bg-lime-600是Tailwind CSS v3及以上版本才有的颜色类，若本地项目使用v2版本，自然无法识别该类。通过npm list tailwindcss查看本地版本，确保和Playground使用的版本一致。

• 检查类名拼写和格式
  仔细核对类名是否有拼写错误（比如把lime写成lim）、多余特殊字符，确保和Playground里的类名完全一致。

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