Tailwind CSS+Next.js项目JIT模式下部分类（如bottom-0）不生效问题咨询

你遇到的bottom-0类在JIT模式下不生效、禁用JIT就正常的问题，核心是Tailwind JIT模式按需生成样式的机制没有识别到该类需要生成，属于旧版JIT的常见问题，具体排查方向如下：

• 检查类名是否为静态书写
  不要使用字符串拼接的方式动态生成类名，例如className={bottom-${variable}}这类写法JIT扫描器无法识别，不会生成对应的样式。如果必须用动态值，可以将完整类名写在判断分支里，或者配置safelist强制生成。
• 补充完整的文件扫描路径
  你当前配置的purge扫描路径仅包含pages和components两个目录，如果使用bottom-0的代码位于其他目录（例如layout、lib、hooks目录下返回JSX的文件），需要将对应路径补充到purge数组中：

purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', './layout/**/*.{js,ts,jsx,tsx}'],

• 清除JIT缓存重试
  旧版JIT的本地缓存可能出现更新不及时的问题，可以删除项目下的.next缓存目录，以及node_modules/.cache/tailwindcss目录后重新启动开发服务，启动时可以添加--no-cache参数避免缓存干扰：

rm -rf .next node_modules/.cache/tailwindcss
next dev --no-cache

• 配置safelist强制保留需要的类
  如果确认路径和类名书写都没问题，可以在purge配置中添加safelist，强制JIT生成你需要的类：

module.exports = {
  // 其余配置保持不变
  purge: {
    content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
    safelist: ['bottom-0'] // 可添加多个需要强制生成的类名
  }
}

• 升级Tailwind版本
  你当前使用的是Tailwind v2的JIT配置（手动声明mode: 'jit'），v2的早期JIT版本存在多个已知的类生成异常Bug，你可以升级到Tailwind v2的最新稳定版，或者直接迁移到Tailwind v3：v3默认开启JIT模式，无需手动配置mode，且修复了绝大多数旧版JIT的问题，兼容性更好。

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