[{"data":1,"prerenderedAt":330},["ShallowReactive",2],{"post-nuxt-tailwind-underline-fix":3},{"id":4,"title":5,"author":6,"body":7,"description":314,"draft":315,"extension":316,"image":317,"meta":318,"navigation":319,"path":320,"pinned":315,"published":321,"seo":322,"stem":323,"tags":324,"__hash__":329},"posts\u002Fposts\u002Fnuxt-tailwind-underline-fix\u002Findex.md","Nuxt 3 + Tailwind CSS 客户端导航链接下划线闪烁问题","Nixus",{"type":8,"value":9,"toc":307},"minimark",[10,14,18,37,40,43,46,102,113,120,143,150,154,157,160,163,166,189,200,267,272,285,288,294,304],[11,12,13],"h2",{"id":13},"问题描述",[15,16,17],"p",{},"在 Nuxt 3 项目中使用 Tailwind CSS 时，发现一个奇怪的现象：",[19,20,21,34],"ul",{},[22,23,24,25,29,30],"li",{},"首次通过客户端导航（点击 ",[26,27,28],"code",{},"\u003CNuxtLink>","）跳转到某个页面时，",[31,32,33],"strong",{},"所有链接文字都会出现下划线",[22,35,36],{},"手动刷新页面后，下划线消失，样式恢复正常",[15,38,39],{},"这个问题在开发模式和生产构建后都会出现。",[11,41,42],{"id":42},"原因分析",[15,44,45],{},"Tailwind CSS 的 Preflight（基于 modern-normalize）会重置链接样式：",[47,48,53],"pre",{"className":49,"code":50,"language":51,"meta":52,"style":52},"language-css shiki shiki-themes github-light github-dark","a {\n  color: inherit;\n  text-decoration: inherit;\n}\n","css","",[26,54,55,68,84,96],{"__ignoreMap":52},[56,57,60,64],"span",{"class":58,"line":59},"line",1,[56,61,63],{"class":62},"sbB4o","a",[56,65,67],{"class":66},"sIX_F"," {\n",[56,69,71,75,78,81],{"class":58,"line":70},2,[56,72,74],{"class":73},"suQ91","  color",[56,76,77],{"class":66},": ",[56,79,80],{"class":73},"inherit",[56,82,83],{"class":66},";\n",[56,85,87,90,92,94],{"class":58,"line":86},3,[56,88,89],{"class":73},"  text-decoration",[56,91,77],{"class":66},[56,93,80],{"class":73},[56,95,83],{"class":66},[56,97,99],{"class":58,"line":98},4,[56,100,101],{"class":66},"}\n",[15,103,104,105,108,109,112],{},"正常情况下，这会让链接继承父元素的 ",[26,106,107],{},"text-decoration","（通常是 ",[26,110,111],{},"none","），从而去掉浏览器默认的下划线。",[15,114,115,116,119],{},"问题出在 ",[31,117,118],{},"Nuxt 的客户端导航机制","：",[121,122,123,129,132,137,140],"ol",{},[22,124,125,126,128],{},"用户点击 ",[26,127,28],{},"，Vue Router 拦截导航",[22,130,131],{},"新页面组件异步加载并渲染",[22,133,134],{},[31,135,136],{},"在 CSS 完全加载\u002F应用之前，页面已经渲染了",[22,138,139],{},"此时浏览器使用默认样式（链接带下划线）",[22,141,142],{},"CSS 加载完成后，下划线消失",[15,144,145,146,149],{},"这就是典型的 ",[31,147,148],{},"FOUC（Flash of Unstyled Content）"," 问题。",[11,151,153],{"id":152},"为什么刷新就正常了","为什么刷新就正常了？",[15,155,156],{},"刷新页面时，浏览器会等待所有 CSS 加载完成后再渲染页面（SSR 模式下 HTML 和 CSS 是一起返回的）。所以刷新后样式是正确的。",[15,158,159],{},"而客户端导航是 JavaScript 驱动的，CSS 的加载和页面的渲染是异步的，就出现了时序差。",[11,161,162],{"id":162},"解决方案",[15,164,165],{},"尝试了多种方案：",[19,167,168,174,180,186],{},[22,169,170,173],{},[26,171,172],{},"@layer base"," 覆盖 — 无效，CSS layers 的优先级问题",[22,175,176,179],{},[26,177,178],{},"corePlugins.preflight: false"," — 无效，且破坏其他基础样式",[22,181,182,185],{},[26,183,184],{},"features.inlineStyles: true"," — 无效",[22,187,188],{},"页面过渡动画 — 只是掩盖，不能根治",[15,190,191,192,195,196,199],{},"最终有效的方案是在 ",[26,193,194],{},"app.vue"," 中用 ",[26,197,198],{},"!important"," 强制覆盖：",[47,201,205],{"className":202,"code":203,"language":204,"meta":52,"style":52},"language-vue shiki shiki-themes github-light github-dark","\u003Cstyle>\na:not(.prose a) {\n  text-decoration-line: none !important;\n}\n\u003C\u002Fstyle>\n","vue",[26,206,207,218,238,253,257],{"__ignoreMap":52},[56,208,209,212,215],{"class":58,"line":59},[56,210,211],{"class":66},"\u003C",[56,213,214],{"class":62},"style",[56,216,217],{"class":66},">\n",[56,219,220,222,226,229,232,235],{"class":58,"line":70},[56,221,63],{"class":62},[56,223,225],{"class":224},"sw2iP",":not",[56,227,228],{"class":66},"(",[56,230,231],{"class":224},".prose",[56,233,234],{"class":62}," a",[56,236,237],{"class":66},") {\n",[56,239,240,243,245,247,251],{"class":58,"line":86},[56,241,242],{"class":73},"  text-decoration-line",[56,244,77],{"class":66},[56,246,111],{"class":73},[56,248,250],{"class":249},"siTax"," !important",[56,252,83],{"class":66},[56,254,255],{"class":58,"line":98},[56,256,101],{"class":66},[56,258,260,263,265],{"class":58,"line":259},5,[56,261,262],{"class":66},"\u003C\u002F",[56,264,214],{"class":62},[56,266,217],{"class":66},[15,268,269],{},[31,270,271],{},"关键点：",[19,273,274,279],{},[22,275,276,278],{},[26,277,198],{}," 是为了对抗 Tailwind CSS layers 的优先级",[22,280,281,284],{},[26,282,283],{},":not(.prose a)"," 排除文章正文区域，保留文章内链接的下划线（可读性需要）",[11,286,287],{"id":287},"总结",[15,289,290,291,293],{},"这是 Nuxt 3 + Tailwind CSS 的一个已知问题，本质上是 CSS 加载时序导致的 FOUC。",[26,292,198],{}," 虽然不够优雅，但在这个场景下是务实的解决方案。",[15,295,296,297,303],{},"如果你有更好的方案，欢迎在 ",[63,298,302],{"href":299,"rel":300},"https:\u002F\u002Fgithub.com\u002Fwishesl\u002FSuBlog\u002Fissues",[301],"nofollow","Issues"," 提出！",[214,305,306],{},"html pre.shiki code .sbB4o, html code.shiki .sbB4o{--shiki-light:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sIX_F, html code.shiki .sIX_F{--shiki-light:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .suQ91, html code.shiki .suQ91{--shiki-light:#005CC5;--shiki-dark:#79B8FF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sw2iP, html code.shiki .sw2iP{--shiki-light:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .siTax, html code.shiki .siTax{--shiki-light:#D73A49;--shiki-dark:#F97583}",{"title":52,"searchDepth":70,"depth":86,"links":308},[309,310,311,312,313],{"id":13,"depth":70,"text":13},{"id":42,"depth":70,"text":42},{"id":152,"depth":70,"text":153},{"id":162,"depth":70,"text":162},{"id":287,"depth":70,"text":287},"记录 Nuxt 3 配合 Tailwind CSS 时，客户端导航导致链接文字出现下划线闪烁的问题及解决方案。",false,"md","\u002Fposts\u002Fnuxt-tailwind-underline-fix\u002Fimg\u002Fcover.png",{},true,"\u002Fposts\u002Fnuxt-tailwind-underline-fix","2026-05-31T18:47:00",{"title":5,"description":314},"posts\u002Fnuxt-tailwind-underline-fix\u002Findex",[325,326,327,328],"Nuxt","Tailwind CSS","CSS","踩坑","uD8rqIXc3kgBmbc47CsQbSv6XvsbCuIMLYSeBdu1wzQ",1780733791991]