我正在使用最新的 Next.js 16.1.6、Tailwind CSS v4.2.1 和 React 19。在使用Turbopack (next dev --turbo) 启动开发服务器时，像 aspect-[12/5]、z-[100] 或 h-[80vh] 这样的任意值类在HTML DOM中虽然正确存在，但相应的CSS规则并未通过JIT引擎生成。

当这些类用于导入了大型第三方库（如 Swiper.js）的组件时，这种情况似乎更容易发生。

这是Tailwind v4的 Turbopack扫描器的已知问题吗？是否有可靠的方法确保这些关键的布局属性被强制应用？

解决方案

经过大量调试，似乎是在Next.js 16.1.6的增量构建过程中，Turbopack（基于Rust的编译器）与 Tailwind v4的 JIT引擎之间交互的一个间歇性问题。对于应用于导入了大型第三方库（如 Swiper.js）的组件，扫描器有时会错过方括号内的令牌 []。

The Solution: The "Native Bypass"

在 @tailwindcss/postcss 或Next.js修复之前，最稳健的架构层面的权宜之计，是通过使用 React原生内联样式 来绕过Tailwind编译器，以对关键结构属性（如纵横比、Z-Index和固定高度）进行强制控制：

TypeScript

// Instead of <div className="aspect-[12/5] z-[100]">
<div style={{ aspectRatio: "12/5", zIndex: 100 }}>

这确保浏览器无论构建工具的JIT状态如何，都会强制执行布局，同时你仍然可以使用Tailwind来实现像内边距、颜色或flexbox这样的常用工具类。

我已经就这个错误在这里提交了官方问题：https://github.com/tailwindlabs/tailwindcss/issues/19825