Creating with-tailwindcss example instead creates with-tailwind-emotion

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System: Platform: win32 Arch: x64 Version: Windows 10 Home Binaries: Node: 16.17.0 npm: N/A Yarn: N/A pnpm: N/A Relevant packages: next: 12.3.0 eslint-config-next: N/A react: 18.1.0 react-dom: 18.1.0

Which example does this report relate to?

with-tailwindcss

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

When calling yarn create next-app --example with-tailwindcss test or npx create-next-app --example with-tailwindcss test the project created is pulled from with-tailwindcss-emotion, rather than with-tailwindcss.

Expected Behavior

A project is created from with-tailwindcss example.

To Reproduce

Call yarn create next-app --example with-tailwindcss test or npx create-next-app --example with-tailwindcss test.

[agusthas]

I’ve realized I was slightly mistaken - the repo is not pulled from with-tailwindcss-emotion. It seems largely based on the emotion example but it’s slightly different. I’m not exactly sure where it’s coming from. It is very similar to the with-tailwindcss-emotion repo. The components folder is the same, and it has the same .babelrc specifying emotion, but there is no emotion in the package.json. Not sure if there’s a way I can figure out where exactly it’s pulling from?

Edit: The readme calls itself the with-tailwindcss example, but it’s clearly not the current with-tailwindcss example.

I’ve checked the examples for with-tailwindcss-emotion and with-tailwindcss. It seems that the result repo is pulled from both of them and the cli try to merge them.

Later digging on the create-next-app on canary release, i found this line interesting https://github.com/vercel/next.js/blob/fc3ef810ba3cfddd7763ad6fc498a6f2cddc3064/packages/create-next-app/helpers/examples.ts#L125

It seems that since both examples folder name with-tailwindcss and with-tailwindcss-emotion includes the word with-tailwindcss, then they both get pulled, extracted, and then merged?

[balazsorban44]

@agusthas very good catch, I opened a PR to make the path matching more precise when extracting the files. #40513