TypeError: Cannot read property 'theme' of undefined

[phoshenwen]

What example does this report relate to?

with-tailwindcss-emotion

What version of Next.js are you using?

11 | 10.2.3

What version of Node.js are you using?

14.17.1

What browser are you using?

Chrome & Firefox

What operating system are you using?

Win 10

How are you deploying your application?

n/a

Describe the Bug

Running "npm run dev" results in TypeError: Cannot read property 'theme' of undefined

Expected Behavior

Running "npm run dev" starts up the application without errors

To Reproduce

Following the instructions, I ran npx create-next-app --example with-tailwindcss-emotion with-tailwindcss-emotion-app, then npm run dev, then see error.

EDIT: Might relate to #25854 and #26012. The only tailwindcss version that works while disabling mode: "jit" is tailwindcss 2.1.4 (thanks for the pull request, @akellbl4 )

If this is considered a duplicate, please close/delete

[rickyrauch]

I disabled jit but it still doesn't work

[akellbl4]

As I can see the example doesn't work even in my PR. Tried to make a fast fix but had no luck.

You can try to use an example that uses emotion and tailwindcss with twin macro. Hope it'll be merged.

[pipboy3000]

I use tailwindcss 2.1.4 and disabled jit without any errors.

It seems that the error occurs from tailwind 2.2.0.

[ru88s]

I have same error.
I disabled jit and I use tailwindcss 2.1.4.
It still doesn't work.

[ru88s]

tailwindlabs/tailwindcss#4686

This solved the problem for me.
This was the second time I was stuck with this error.🥲

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
  // plugins: ['@tailwindcss/jit', 'autoprefixer']
};

[phoshenwen]

@ru88s just to confirm, you're using tailwindcss 2.1.4 in your example and are proposing a fix for 2.1.4 only. This is NOT a fix for tailwind 2.2.x, and 2.2.x continues to NOT work.

Other than version bumping in the here referenced posts, no code base has changed and using tailwindcss 2.2.4 still won't run.

[samcx]

@phoshenwen This may be an issue with xwind, since @akellbl4 has an example working with twin.macro → #26060

[phoshenwen]

@samsisle I can see this being an issue with Tailwindcss more so than Nextjs, only opened it here because the Nextjs example is not working out of the box. Once @akellbl4's pull request is merged this post can go away.

[rickyrauch]

tailwindlabs/tailwindcss#4686

This solved the problem for me.
This was the second time I was stuck with this error.🥲

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
  // plugins: ['@tailwindcss/jit', 'autoprefixer']
};

this was our fix! thanks a lot