chore: 初始化项目仓库

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-31 21:27:39 +08:00
commit b7addb5c7a
50 changed files with 15964 additions and 0 deletions
@@ -0,0 +1,75 @@
+---
+title: Nuxt 3 + Tailwind CSS 客户端导航链接下划线闪烁问题
+published: 2026-05-31T18:47:00
+image: /posts/nuxt-tailwind-underline-fix/img/cover.png
+description: 记录 Nuxt 3 配合 Tailwind CSS 时，客户端导航导致链接文字出现下划线闪烁的问题及解决方案。
+tags: ['Nuxt', 'Tailwind CSS', 'CSS', '踩坑']
+author: Nixus
+---
+
+## 问题描述
+
+在 Nuxt 3 项目中使用 Tailwind CSS 时，发现一个奇怪的现象：
+
+- 首次通过客户端导航（点击 `<NuxtLink>`）跳转到某个页面时，**所有链接文字都会出现下划线**
+- 手动刷新页面后，下划线消失，样式恢复正常
+
+这个问题在开发模式和生产构建后都会出现。
+
+## 原因分析
+
+Tailwind CSS 的 Preflight（基于 modern-normalize）会重置链接样式：
+
+```css
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+```
+
+正常情况下，这会让链接继承父元素的 `text-decoration`（通常是 `none`），从而去掉浏览器默认的下划线。
+
+问题出在 **Nuxt 的客户端导航机制**：
+
+1. 用户点击 `<NuxtLink>`，Vue Router 拦截导航
+2. 新页面组件异步加载并渲染
+3. **在 CSS 完全加载/应用之前，页面已经渲染了**
+4. 此时浏览器使用默认样式（链接带下划线）
+5. CSS 加载完成后，下划线消失
+
+这就是典型的 **FOUC（Flash of Unstyled Content）** 问题。
+
+## 为什么刷新就正常了？
+
+刷新页面时，浏览器会等待所有 CSS 加载完成后再渲染页面（SSR 模式下 HTML 和 CSS 是一起返回的）。所以刷新后样式是正确的。
+
+而客户端导航是 JavaScript 驱动的，CSS 的加载和页面的渲染是异步的，就出现了时序差。
+
+## 解决方案
+
+尝试了多种方案：
+
+- `@layer base` 覆盖 — 无效，CSS layers 的优先级问题
+- `corePlugins.preflight: false` — 无效，且破坏其他基础样式
+- `features.inlineStyles: true` — 无效
+- 页面过渡动画 — 只是掩盖，不能根治
+
+最终有效的方案是在 `app.vue` 中用 `!important` 强制覆盖：
+
+```vue
+<style>
+a:not(.prose a) {
+  text-decoration-line: none !important;
+}
+</style>
+```
+
+**关键点：**
+- `!important` 是为了对抗 Tailwind CSS layers 的优先级
+- `:not(.prose a)` 排除文章正文区域，保留文章内链接的下划线（可读性需要）
+
+## 总结
+
+这是 Nuxt 3 + Tailwind CSS 的一个已知问题，本质上是 CSS 加载时序导致的 FOUC。`!important` 虽然不够优雅，但在这个场景下是务实的解决方案。
+
+如果你有更好的方案，欢迎在 [Issues](https://github.com/wishesl/SuBlog/issues) 提出！