---
title: Nuxt 3 + Tailwind CSS 客户端导航链接下划线闪烁问题
published: 2026-05-31T18:47:00
updated: 2026-05-31
image: /posts/nuxt-tailwind-underline-fix/img/cover.png
description: 记录 Nuxt 3 配合 Tailwind CSS 时，客户端导航导致链接文字出现下划线闪烁的问题及解决方案。
tags: ['Nuxt', 'Tailwind CSS', 'CSS', '踩坑']
author: SuBlog
series: Nuxt 博客开发
seriesOrder: 3
difficulty: 进阶
---

## 问题描述

在 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 中提出！