Next.js + TailwindCSS项目打包后部分样式类无法生效问题求助

1. 生产构建时Tailwind的Purge样式裁剪机制扫描路径不匹配：开发模式下Purge默认关闭，所有Tailwind类都会被保留，因此npm run dev运行正常；生产构建时Purge会自动开启，仅保留扫描路径下文件中出现过的类。你在_app.js中导入组件的目录为componsants，但Tailwind配置的扫描路径仅包含components目录，路径拼写不一致导致componsants下的文件未被扫描，其中用到的h-20、text-white等类被当做无用样式裁剪，所以启动生产服务后样式失效。
2. Tailwind配置文件命名错误：你当前的配置文件命名为tailwind.css，Tailwind默认读取的配置文件名为tailwind.config.js，错误的文件名会导致自定义主题等配置无法被正确加载。
3. JSX语法不规范：React/Next.js的JSX代码中需使用className属性指定样式类，你业务代码中使用的原生HTMLclass属性不会被React识别，也会导致样式无法应用。

• 修正Tailwind配置文件名：将tailwind.css重命名为tailwind.config.js
• 调整Purge扫描路径，匹配你的实际组件目录，修改tailwind.config.js中的purge字段如下：

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

若为目录拼写错误，可将组件目录名改为标准的components，同时同步所有导入路径，保持和purge配置一致即可。

• 将所有JSX文件中的class属性替换为className
• 重新执行npm run build和npm run start验证效果

内容的提问来源于stack exchange，提问作者J. Doe