首屏加载慢主因是Tailwind生成冗余CSS，需启用JIT模式、精简content路径、禁用无关断点与插件，并验证类名是否污染关键CSS。
首屏加载慢，八成是 Tailwind 生成了大量用不到的 CSS，尤其在移动端只用 sm: 和默认断点的情况下，xl:text-4xl 这类类名若被误加到 banner 上，就会拖垮关键 CSS 体积。
确认 JIT 模式真在运行
终端启动 Nuxt 时必须看到 Using JIT (Just-In-Time) mode。没这行，说明 JIT 被禁用了：
-
tailwind.config.js里还留着purge: []或mode: 'aot'—— 全部删掉，v3+ 不认这两个字段 - 手动写了
postcss.config.js，覆盖了框架默认插件顺序，导致tailwindcss插件没排第一 —— 直接删掉根目录的postcss.config.js -
content字段为空或路径不全，比如漏了app/layout.vue或components/**/*.{vue,ts}—— 必须是数组且精确覆盖首屏模板文件
精简 content 扫描范围
扫描路径越宽，JIT 生成的 CSS 就越“保守”，越容易把非首屏类名也打包进去：
- 不要写
content: ['./src/**/*.{vue,ts}']，改用content: ['./app/pages/home.vue', './components/hero.vue', './layouts/default.vue']这类明确指向首屏结构的路径 - 如果用了
definePageMeta动态注入类名（如class="text-${size}-500"），确保对应变量在content扫描的 JS 文件里被字符串字面量引用，否则 JIT 无法识别 - 检查
node_modules/.vite下是否有tailwindcss_*.js缓存文件，没有说明 Vite 预构建跳过了它，需在vite.config.ts的optimizeDeps.include中显式加入['tailwindcss', 'tailwindcss/plugin', 'postcss']
避免非首屏类名污染关键 CSS
哪怕 JIT 开着，只要 class 写法不当，照样会把大块 CSS 塞进首屏资源里：
立即学习“前端免费学习笔记（深入）”；
- 别在首屏元素上写
class="hidden md:block"——md:block是非首屏样式，应移出关键路径，改用条件 class 或服务端逻辑控制显示 - Tailwind 默认启用所有响应式变体，但移动端首屏几乎只用
sm:及以下；若项目确定不用xl:，可在tailwind.config.js的theme.screens中删掉或注释掉xl及更大断点 - 禁用首屏无关插件，比如
@tailwindcss/aspect-ratio若 banner 没用宽高比控制，就从plugins数组里移除
真正难的不是配置 purge 或 content，而是每次发版后重新验证：那个新加的 class="2xl:px-48" 是否悄悄混进了首页 HTML 的 <style></style> 标签里——这时候光看 Lighthouse 分数没用，得直接打开 Network 面板，过滤 index.html 的内联 CSS，Ctrl+F 搜类名。
