Turbopack Not Compiling Tailwind CSS Changes in Safari #71923
Description
Link to the code that reproduces this issue
https://github.com/infinity-atom42/nextjs-turbopack-bug
To Reproduce
-
Initialize a New Next.js Project:
npx create-next-app@15.0.1 . -
Configure Project Settings:
Respond with Yes to all prompts except for customizing the import alias.- TypeScript: Yes
- ESLint: Yes
- Tailwind CSS: Yes
src/Directory: Yes- App Router: Yes
- Turbopack for Next Dev: Yes
- Customize Import Alias: No
-
Start the Development Server:
npm run dev
-
Modify
layout.tsx:-
Comment Out Google Fonts:
// const geistSans = localFont({ // src: "./fonts/GeistVF.woff", // variable: "--font-geist-sans", // weight: "100 900", // }); // const geistMono = localFont({ // src: "./fonts/GeistMonoVF.woff", // variable: "--font-geist-mono", // weight: "100 900", // });
-
Comment Out
classNameinbody:<body // className={`${geistSans.variable} ${geistMono.variable} antialiased`} > {children} </body>
-
-
Access the Application in Safari or Safari Technology Preview:
Openhttp://localhost:3000in Safari. -
Observe the Issue:
Tailwind CSS styles are not applied to the application.
Current vs. Expected behavior
Expected Behavior
Tailwind CSS should process and apply styles correctly, irrespective of the inclusion of Google Fonts, when using Turbopack for development. The styles should render properly in all supported browsers, including Safari.
Actual Behavior
After removing Google Fonts and utilizing Turbopack in Next.js v15.0.1, Tailwind CSS fails to process styles only in Safari and Safari Technology Preview browsers. The issue does not manifest in other browsers or when Turbopack is disabled.
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 24.0.0: Tue Sep 24 23:36:26 PDT 2024; root:xnu-11215.1.12~1/RELEASE_ARM64_T8103
Available memory (MB): 8192
Available CPU cores: 8
Binaries:
Node: 22.9.0
npm: 10.9.0
Yarn: N/A
pnpm: 9.12.2
Relevant Packages:
next: 15.0.1 // Latest available version is detected (15.0.1).
eslint-config-next: 15.0.1
react: 19.0.0-rc-69d4b800-20241021
react-dom: 19.0.0-rc-69d4b800-20241021
typescript: 5.6.3
Next.js Config:
output: N/AWhich area(s) are affected? (Select all that apply)
Turbopack
Which stage(s) are affected? (Select all that apply)
next dev (local)
Additional context
Current layout.tsx File
