with-tailwindcss-emotion doesn't work

[PabloSzx]

related pr: #23912

What version of Next.js are you using?

10.2.0

What version of Node.js are you using?

14.17.0

What browser are you using?

Error happens before any browser is used

What operating system are you using?

Windows

How are you deploying your application?

next dev & next start

Describe the Bug

The included example of Tailwind CSS with Emotion.js doesn't work

error - ./pages/_app.js
TypeError: C:\Users\X\with-tailwindcss-emotion-app\pages_app.js: matchUtilities is not a function
at Array.forEach ()
Error: Failed to load /500

Expected Behavior

to work, neither next build or next dev work

To Reproduce

Follow the example in the repo:

https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss-emotion

yarn create next-app --example with-tailwindcss-emotion with-tailwindcss-emotion-app

[sunopar]

The issue causing this probole is tailwindlabs/tailwindcss#4050 Arthie/xwind#30
I think we can remove xwind until if fix the probolem

[leohxj]

why not try twin.macro?

[adamk33n3r]

I'm new to react and css-in-js in general, what is the benefit of using libraries like emotion or twin.macro instead of just doing className='container mx-auto'?