Tailwind v4 cursor:url(hand.cur) parsing error with Next.js Turbopack

[windsornguyen]

Describe your issue

There is a mysterious error that occurs when using the Next.js --turbo flag in a project where there are additional Tailwind directives in non-traditional places that were not meant to be read, e.g. docs/.

What version of Tailwind CSS are you using?

For example: v4.1.13

What build tool (or framework if it abstracts the build tool) are you using?

Next.js 15.5.4
React: 19.1.0
React-DOM: 19.1.0

What version of Node.js are you using?

v22.11.0

What browser are you using?

Arc

What operating system are you using?

MacOS

Reproduction

1. Create Next.js app and accept all defaults: npx create-next-app@latest tailwind-bug --typescript --eslint --app
2. Navigate into directory: cd tailwind-bug
3. Install dependencies: npm install
4. Run the Next.js server: next dev --turbo

At this point, the Next.js server should run normally as expected.

5. Clone additional documentation about Tailwind, which may contain Tailwind directives: git clone https://github.com/windsornguyen/tailwindcss-v4-docs
6. Run the server with the --turbo flag again, which should trigger the error: next dev --turbo

Error stack trace:

▲ Next.js 15.5.3 (Turbopack)
   - Local:        http://localhost:3000
   - Network:      http://192.168.1.89:3000

 ✓ Starting...
 ✓ Ready in 620ms
 ○ Compiling / ...
 ✓ Compiled / in 1331ms
 ⨯ ./tailwind-bug/app/globals.css:4712:25
Module not found: Can't resolve '...'
  4710 |     @media (width >= 48rem) {
  4711 |       list-style-image: url(...);
> 4712 |     }
       |      ^
  4713 |   }
  4714 |   .md\:appearance-none {
  4715 |     @media (width >= 48rem) {



Import trace:
  Client Component Browser:
    ./tailwind-bug/app/globals.css [Client Component Browser]
    ./tailwind-bug/app/layout.tsx [Server Component]

https://nextjs.org/docs/messages/module-not-found



./tailwind-bug/app/globals.css:3727:13
Module not found: Can't resolve 'filters.svg#filter-id'
  3725 |   .filter-\[url\(\'filters\.svg\#filter-id\'\)\] {
  3726 |     filter: url('filters.svg#filter-id');
> 3727 |   }
       |    ^
  3728 |   .filter-none {
  3729 |     filter: none;
  3730 |   }



Import trace:
  Client Component Browser:
    ./tailwind-bug/app/globals.css [Client Component Browser]
    ./tailwind-bug/app/layout.tsx [Server Component]

https://nextjs.org/docs/messages/module-not-found



./tailwind-bug/app/globals.css:1308:13
Module not found: Can't resolve 'hand.cur'
  1306 |   .cursor-\[url\(hand\.cur\)\,_pointer\] {
  1307 |     cursor: url(hand.cur), pointer;
> 1308 |   }
       |    ^
  1309 |   .cursor-pointer {
  1310 |     cursor: pointer;
  1311 |   }



Import trace:
  Client Component Browser:
    ./tailwind-bug/app/globals.css [Client Component Browser]
    ./tailwind-bug/app/layout.tsx [Server Component]

https://nextjs.org/docs/messages/module-not-found


 ○ Compiling /_error ...
 ✓ Compiled /_error in 538ms
Error [ModuleBuildError]: ./tailwind-bug/app/globals.css:4712:25
Module not found: Can't resolve '...'
  4710 |     @media (width >= 48rem) {
  4711 |       list-style-image: url(...);
> 4712 |     }
       |      ^
  4713 |   }
  4714 |   .md\:appearance-none {
  4715 |     @media (width >= 48rem) {



Import trace:
  Client Component Browser:
    ./tailwind-bug/app/globals.css [Client Component Browser]
    ./tailwind-bug/app/layout.tsx [Server Component]

https://nextjs.org/docs/messages/module-not-found



./tailwind-bug/app/globals.css:3727:13
Module not found: Can't resolve 'filters.svg#filter-id'
  3725 |   .filter-\[url\(\'filters\.svg\#filter-id\'\)\] {
  3726 |     filter: url('filters.svg#filter-id');
> 3727 |   }
       |    ^
  3728 |   .filter-none {
  3729 |     filter: none;
  3730 |   }



Import trace:
  Client Component Browser:
    ./tailwind-bug/app/globals.css [Client Component Browser]
    ./tailwind-bug/app/layout.tsx [Server Component]

https://nextjs.org/docs/messages/module-not-found



./tailwind-bug/app/globals.css:1308:13
Module not found: Can't resolve 'hand.cur'
  1306 |   .cursor-\[url\(hand\.cur\)\,_pointer\] {
  1307 |     cursor: url(hand.cur), pointer;
> 1308 |   }
       |    ^
  1309 |   .cursor-pointer {
  1310 |     cursor: pointer;
  1311 |   }



Import trace:
  Client Component Browser:
    ./tailwind-bug/app/globals.css [Client Component Browser]
    ./tailwind-bug/app/layout.tsx [Server Component]

https://nextjs.org/docs/messages/module-not-found


    at <unknown> (ModuleBuildError: ./tailwind-bug/app/globals.css:4712:25)
    at <unknown> (https://nextjs.org/docs/messages/module-not-found)
    at <unknown> (./tailwind-bug/app/globals.css:3727:13)
    at <unknown> (https://nextjs.org/docs/messages/module-not-found)
    at <unknown> (./tailwind-bug/app/globals.css:1308:13)
    at <unknown> (https://nextjs.org/docs/messages/module-not-found)
[Error: Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:
  - react:      19.1.1
  - react-dom:  19.1.0
Learn more: https://react.dev/warnings/version-mismatch]
 ✓ Compiled /favicon.ico in 85ms
 GET /favicon.ico 500 in 171ms

This issue also occurs sometimes when using some combination of React 19 and the Next.js experimental compiler, although the reproduction of that is less reliable and will therefore be omitted in this bug report.

There is also some weird version mismatch error between React 19.1.1 and React-DOM 19.1.0 that may be propagated from the internal versioning of Next.js.

[wongjn]

This happens because Tailwind scans the files in tailwindcss-v4-docs. It sees valid Tailwind class names and thus builds them. Then the files referenced in the url()s don't exist, hence the errors. You could workaround this by telling Tailwind not to scan the directory by doing one of:

• Adding to globals.css:

  @source not "../tailwindcss-v4-docs";

• Adding to .gitignore:

  tailwindcss-v4-docs