next.js 15首屏闪样式根本原因是构建链路与加载时机不匹配：服务端渲染html时缺失对应样式类，浏览器先用默认样式渲染，待客户端水合完成、js注入css或切换主题后重绘，产生几十毫秒闪烁；全局css仅允许在app/layout.tsx中单点引入app/globals.css，禁止任意组件（尤其server component）import非模块化css，否则报错或document is not defined；删postcss.config.js以启用jit模式，css modules需配合"use client"声明，关键样式须内联并阻塞渲染，tailwind暗色模式需在中用内联脚本提前设置data-theme。
为什么Next.js 15首屏会闪样式？
根本不是CSS写错了，而是构建链路和加载时机不匹配：服务端渲染出的HTML没有对应样式类，浏览器先用默认样式画一遍，等客户端水合完成、JS注入CSS或切换主题后才重绘——这几十毫秒就是闪烁窗口。
全局CSS只能从app/globals.css单点引入
Next.js 15禁止在任意组件（尤其是Server Component）里import './xxx.css'，否则构建报错或运行时报document is not defined。这不是bug，是设计约束。
-
app/globals.css必须被app/layout.tsx直接import，且仅此一处 - 所有其他非模块化CSS（比如第三方reset.css）不能直接import，得用
useEffect动态插入<style></style>标签 - 删掉项目根目录的
postcss.config.js——它会禁用JIT模式，导致Tailwind退化成全量CSS，拖慢注入速度
CSS Modules必须配合"use client"
哪怕你只用.module.css做局部样式，只要组件涉及DOM操作、状态或交互，就必须声明"use client"，否则类名生成失效，样式不生效。
- 把
"use client"放在文件顶部，再 importstyles from './Button.module.css' - Server Component里不能import任何.css文件，但可以import .module.css——只是它不会挂载到DOM，实际无效
- 如果组件纯服务端渲染（比如静态页头部），就别用CSS Modules，改用
app/globals.css里定义的全局类
关键样式必须阻塞渲染
把首屏必需的CSS内联进，不是“放进去就行”，而是要确保它真正阻塞HTML解析直到就绪。
- 用
next/font加载字体时，务必绑定font.variable到或，而不是误用font.className - Tailwind暗色模式闪烁？必须在
app/layout.tsx的里插内联脚本，读localStorage.getItem('theme')并立即设document.documentElement.dataset.theme - 避免
@import和JS动态创建<link>——它们绕过预加载机制，必然FOUC
最难的不是写代码，是判断哪些样式算“关键”：它取决于设备宽度、用户是否登录、当前路由参数，甚至A/B实验分组。这个边界划错，要么白内联，要么HTML体积暴增。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
