Next.js应用中TailwindCSS部分类（top/left等）失效求助

先排查基础缓存与构建问题 #

• 删除.next文件夹和node_modules/.cache目录，重新执行npm run build或npm run dev——版本升级后残留的缓存是样式异常的常见诱因。
• 确认_app.js/_app.tsx中的样式导入顺序：先导入Tailwind的index.css，再导入global.scss，避免旧项目的全局样式覆盖Tailwind工具类。

检查global.scss的样式冲突 #

• 搜索global.scss中是否存在全局定位样式，比如给h5或通用元素设置position: static !important，这会直接覆盖absolute类的效果。
• 排查是否有针对top/left/box-shadow的全局重置规则，比如* { top: auto !important; }这类代码会冲掉Tailwind的定位类。
• 查看自定义类drag-indicator的样式：你的示例中用了这个类，确认它是否设置了position: relative或其他与absolute冲突的属性。

确认Tailwind配置的内容范围 #

Tailwind v3默认启用JIT模式，哪怕purge.enabled设为false，content配置不全也会导致部分类未生成：

• 检查content路径是否覆盖所有用到Tailwind类的文件，比如组件有.jsx后缀的话，要改成./components/**/*.{js,jsx}，pages目录同理。
• 若项目存在src等其他目录，也要补充到content数组中。

定位类的生效条件 #

• absolute元素的定位参考是最近的非static定位父元素：如果父元素没设置relative/absolute/fixed，top-1/2和left-1/2会相对于视口定位，可能看起来没生效，检查父元素样式。
• 用浏览器开发者工具查看元素CSS：确认drop-shadow-xl是否生成了filter: drop-shadow(...)样式，若没有，返回content配置排查类未生成的原因。

其他排查点 #

• 检查依赖兼容性：确认postcss和autoprefixer版本与Tailwind v3匹配，可执行npm list postcss autoprefixer查看。
• 查看Next.js控制台输出：是否存在PostCSS编译错误或样式加载异常提示。

内容的提问来源于stack exchange，提问作者Rom-888