如何排查Tailwind CSS类名（className）的拼写错误？

• 启用Tailwind官方Lint工具
  在tailwind.config.js里开启lint配置，让编译过程自动检测无效类名并抛出错误或警告：

  module.exports = {
    lint: {
      css: true,
      invalidApply: 'error',
      invalidConfigPath: 'error',
      invalidScreen: 'error',
      invalidTailwindDirective: 'error',
      invalidVariant: 'error',
      conflictingClass: 'warning',
    },
    // 其他配置...
  }
  

  配置后Next.js编译时，会直接提示哪些类名不符合规则或不存在。

• 使用VS Code的Tailwind CSS IntelliSense插件
  这个插件能实时校验类名：输入时自动补全正确的Tailwind类，拼写错误或格式不对的类会被标红，hover还能查看类对应的样式。自定义工具类只要被Tailwind扫描到，也能被识别，无需复杂额外配置。

• 手动核对类名与Tailwind规则
  Tailwind默认类名用短横线分隔（如text-xl），自定义工具类如果用下划线，要确保：

  1. 类名所在文件路径被包含在tailwind.config.js的content数组中，能被Tailwind扫描到；
  2. 自定义类的命名没有使用Tailwind不允许的特殊字符，分隔符使用符合预期。

• 分析构建后的CSS文件
  Next.js构建完成后，在.next/static/css/目录下的CSS文件里搜索目标类名：

  # Linux/macOS
  grep "account-form_image-label" .next/static/css/*.css
  
  # Windows PowerShell
  Select-String -Path .next/static/css/*.css -Pattern "account-form_image-label"
  

  如果搜不到结果，说明这个类名要么拼写错误，要么没被Tailwind识别生成样式，需要回头检查类名和配置。

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