Tailwind CSS v4 中 glob 模式匹配 Next.js 动态路由的问题解析

Tailwind CSS 作为当前流行的原子化 CSS 框架，在 v4 版本中引入了一些新特性，其中就包括通过 glob 模式手动指定需要扫描的源文件。然而，这一功能在与 Next.js 的动态路由结合使用时出现了一个值得注意的问题。

问题背景

在 Tailwind CSS v4 中，开发者可以通过 @source 指令显式指定需要扫描的文件路径。常见的配置方式如下：

@import 'tailwindcss' source(none);
@source './**/*.{js,ts,jsx,tsx,mdx}';

这种配置本应扫描项目中的所有 JavaScript、TypeScript 和 MDX 文件。然而，当项目使用 Next.js 的动态路由特性时，特别是类似 [...slug] 这样的 catchall 路由时，Tailwind CSS 的扫描器却无法正确识别这些路径下的文件。

问题原因

经过 Tailwind CSS 团队的分析，这个问题源于底层依赖的 glob 匹配库在处理特殊字符时的行为。Next.js 的动态路由使用方括号作为特殊标记（如 [slug] 或 [...slug]），而 glob 模式中的方括号本身也有特殊含义，用于表示字符集匹配。

当 glob 模式 ./**/*.{js,ts,jsx,tsx,mdx} 遇到类似 [...slug] 这样的路径时，匹配逻辑会出现混乱，导致这些文件被意外排除在扫描范围之外。

临时解决方案

在官方修复发布前，开发者可以采用以下变通方案：

@source './**/*.{js,ts,jsx,tsx,mdx}';
@source './[[]**[]]/*.{js,ts,jsx,tsx,mdx}';

这种写法通过转义方括号的方式，显式告诉 glob 匹配器如何处理 Next.js 的特殊路由格式。虽然不够优雅，但在当时确实解决了燃眉之急。

官方修复

Tailwind CSS 团队迅速响应了这个问题。他们首先确认这是底层 glob 匹配库的问题，在与原作者沟通后，决定在内部集成修复方案。在随后的版本更新中，这个问题得到了彻底解决。

对开发者的启示

这个问题给开发者带来了几个重要启示：

1. 当使用新版本的工具链时，应该特别注意与现有框架特性的兼容性
2. 了解工具底层原理（如 glob 匹配规则）有助于快速定位和解决问题
3. 开源社区的快速响应机制能够有效解决紧急问题

对于使用 Tailwind CSS v4 和 Next.js 动态路由的开发者来说，现在可以放心使用标准的 glob 模式配置，无需再担心特殊路由格式的匹配问题。这也体现了现代前端工具链日趋成熟的生态协作能力。