How to install tailwindcss in nextjs 13?

[realyukii]

I tried to install tailwindcss with guidance from the documentation tailwindcss as well as nextjs, but I still can't use it and get the following error

- error ./app/global.css
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @tailwind base;
| @tailwind components;
| @tailwind utilities;

Import trace for requested module:
./app/global.css

am I missing something very important?

[wongjn]

Yes it seems like you might have! Please consider providing a remotely-hosted git repository that reproduces the unexpected behavior.

[realyukii]

thanks for the very quick response, sorry it was my fault for using the deprecated next-transpile-modules package, I tried to remove it and now tailwindcss works properly!

[LazyCoder4542]

I tried to install tailwindcss with guidance from the documentation tailwindcss as well as nextjs, but I still can't use it and get the following error

- error ./app/global.css
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @tailwind base;
| @tailwind components;
| @tailwind utilities;

Import trace for requested module:
./app/global.css

am I missing something very important?

I have this same issue when using the vercel cli

"dependencies": {
"axios": "^1.6.7",
"bcryptjs": "^2.4.3",
"body-parser": "^1.20.2",
"cookie-parser": "^1.4.6",
"dotenv": "^16.3.1",
"express": "^4.18.2",
"framer": "^2.4.1",
"jsonwebtoken": "^9.0.2",
"mongoose": "^8.0.3",
"morgan": "^1.10.0",
"motion": "^10.17.0",
"nanoid": "^3.3.7",
"next": "14.0.4",
"react": "^18",
"react-dom": "^18",
"react-loader-spinner": "^6.1.6",
"uuid": "^9.0.1",
"validator": "^13.11.0"
},
"devDependencies": {
"autoprefixer": "^10.4.16",
"postcss": "^8.4.33",
"tailwindcss": "^3.4.1"
}

[ltfschoen]

i explained the solution that worked for me here andrevesdickow/nextjs-lerna#2 that worked to overcome the error Module parse failed: Unexpected character '@' (1:0)

in addition to removing next-transpile-modules from the package.json file as mentioned above by @RealYukiSan since it is deprecated, it was also necessary to follow the migration guide mentioned here https://github.com/martpie/next-transpile-modules/releases/tag/the-end and change your next.config.js file if necessary, which was the crucial step that worked for me.

i just wish the Tailwind installation instructions here https://tailwindcss.com/docs/installation mentioned the migration guide as that would have saved me a couple of hours trying to figure out why it wouldn't work, since that's necessary if you're trying to pick up an old project that used an older version of Tailwind.