Next.js 中的 babel 和 tailwindcss 问题：找不到模块“xwind/babel”

Question

I installed tailwindcss inside of my Next.js application. This was the error message that I received

error - ./node_modules/next/dist/client/dev/amp-dev.js
Error: Cannot find module 'xwind/babel' 

This is how I installed the Next.js application:

npx create-next-app -e with-tailwindcss ./

These are the dependencies I installed:

npm install graphql graphql-request html-react-parser moment react-multi-carousel sass 

Answer 1

Happened to me as well just few minutes ago. Not sure if that is the same case for you. It created for me components folder, .babelrc file and js files in pages folder. Not sure if that is your case, but that's what happened to me. In case just follow with solution below.

Solution

Remove .bablerc file and components folder along with js files in pages folder.

More details

This is strange because if you look at the repository of Next.js example with-tailwindcss . It doesn't have those. Not sure how that happened. We can elaborate more in the comments.

Also plugin for babel xwind/babel does have dependency check to allow only tailwindcss version <2. There is an issue for that. In my opinion this repo is unmaintained and will either get forked and replaced as a main for npm package or something similar.

Answer 2

The create-next-app is installing with-tailwind-emotion template instead of with-tailwind for some reason.

For now, a good way is to create a normal typescript template with create-next-app and add tailwind manually.

So your steps would be:

Step 1: without typescript:

npx create-next-app ./

or with typescript:

npx create-next-app --ts ./

Step 2:

Docs to install tailwind with next.js: https://tailwindcss.com/docs/guides/nextjs