-
-
Notifications
You must be signed in to change notification settings - Fork 5.1k
Description
Environment & Context
What version of Tailwind CSS are you using?
v4.2.1
What build tool (or framework if it abstracts the build tool) are you using?
Next.js 16.1.6 (using next dev --turbo), @tailwindcss/postcss 4.2.1
What version of Node.js are you using?
v20.18.0 (o superior)
What browser are you using?
Chrome / Safari (Latest)
What operating system are you using?
macOS (Sequoia)
Reproduction URL
N/A (Private Repository). Note: Since this bug specifically triggers under the Next.js 16 Turbopack (Rust-based) compiler, it cannot be reproduced in a standard Tailwind Play environment. I am working on isolating a minimal public repository, but the issue is consistently triggered when applying arbitrary values to containers wrapping heavy Client Components (like Swiper.js v12.1.2).
Describe your issue
Problem Description:
In a Next.js 16.1.6 environment with Turbopack enabled, Tailwind v4.2.1 fails to generate CSS rules for classes using arbitrary values (square brackets []). While the classes appear correctly in the HTML DOM rendered by React 19, the JIT engine fails to produce the corresponding styles in the injected stylesheet.
This issue is particularly persistent with layout-critical properties like:
aspect-[12/5]z-[100]h-[80vh]
It appears that Turbopack's scanner or the Tailwind JIT engine misses these specific tokens during the incremental build process, especially in files that import complex third-party libraries (e.g., Swiper.js v12.1.2).
Steps to Reproduce:
- Use Next.js 16.1.6 and Tailwind 4.2.1.
- Start the development server with
next dev --turbo. - Create a Server or Client component and apply an arbitrary class:
<div className="aspect-[12/5] z-[100]">. - Inspect the element in the browser. The class is present in the
classattribute, but no CSS rules are generated or attached to it.
Expected Behavior:
The JIT engine should detect the arbitrary value tokens and generate the corresponding CSS rules, ensuring parity between Webpack and Turbopack builds.
Current Workaround (The "Native Bypass"):
We are currently forced to bypass the Tailwind compiler for these specific properties by using React native inline styles to ensure layout stability:
<div style={{ aspectRatio: "12/5", zIndex: 100 }}>