Skip to content

CSS selector mangled when using Tailwind + Turbopack #78967

Open
@Almamu

Description

@Almamu

Link to the code that reproduces this issue

https://github.com/Almamu/alignui-nextjs-turbopack-issue

To Reproduce

  1. Start the application in development
  2. Open the site in a browser
  3. The error should be present right away

Image

Current vs. Expected behavior

The app should compile and not show any error.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun, 20 Apr 2025 12:38:52 +0000
  Available memory (MB): 64217
  Available CPU cores: 24
Binaries:
  Node: 23.9.0
  npm: 11.3.0
  Yarn: 1.22.22
  pnpm: 10.10.0
Relevant Packages:
  next: 15.4.0-canary.26 // Latest available version is detected (15.4.0-canary.26).
  eslint-config-next: N/A
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.8.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

CSS, Turbopack

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

The app works as-is just by removing --turbopack from the dev command. The issue seems to be caused by some of the hover properties in the file components/ui/input.tsx. This is an AlignUI component that uses radix-ui behind the scenes. Looking at the error looks like something is "escaping" a bit too much of the content maybe? I might be able to debug this a bit further given some pointers on how to look at the code generated and where it's generated from.

Metadata

Metadata

Assignees

No one assigned

    Labels

    CSSRelated to CSS.TurbopackRelated to Turbopack with Next.js.

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions