Next.js Discord

Discord Forum

error tailwindcss

Unanswered
Levriero Sardo posted this in #help-forum
Open in Discord
Levriero SardoOP
tailwindcss error, I tried to create a new nextjs project with tailwindcss, but the same error appears

52 Replies

You likely do not have postcss installed or tailwindcss's postcss plugin isnt installed or configured
follow this guide, i assume you the project already created, so you can skip that step
@tsa are you using v3 and running v4 code
Levriero SardoOP
v4
@Clown You likely do not have postcss installed or tailwindcss's postcss plugin isnt installed or configured
Levriero SardoOP
Yes, I reinstalled TailwindCSS, following the steps in the Tailwind docs for NextJS.
found 0 vulnerabilities

 ✓ Ready in 5s
 ○ Compiling / ...
 ⨯ ./app/globals.css
Module parse failed: Unexpected character '@' (1:0)
> @import "tailwindcss";
|
| body {

Import trace for requested module:
./app/globals.css
./app/layout.tsx
 ⨯ ./app/globals.css
Module parse failed: Unexpected character '@' (1:0)
> @import "tailwindcss";
|
| body {

Import trace for requested module:
./app/globals.css
./app/layout.tsx
 ⨯ ./app/globals.css
Module parse failed: Unexpected character '@' (1:0)
> @import "tailwindcss";
|
| body {

Import trace for requested module:
./app/globals.css
./app/layout.tsx
 GET / 500 in 14500ms
 ⨯ ./app/globals.css
Module parse failed: Unexpected character '@' (1:0)
> @import "tailwindcss";
|
| body {

Import trace for requested module:
./app/globals.css
./app/layout.tsx
 ⨯ ./app/globals.css
Module parse failed: Unexpected character '@' (1:0)
> @import "tailwindcss";
|
| body {

Import trace for requested module:
./app/globals.css
./app/layout.tsx
 GET /_next/static/webpack/1be2874b121a239e.webpack.hot-update.json 500 in 572ms
 ⚠ Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
 GET / 500 in 10ms
i have reinstall tailwind and setup in nextjs, but i get same error
do you have a postcss.config.js/postcss.config.mjs file?
already
instead I created a new project from nextjs and tried to run it in dev mode, the same error appeared, even though I hadn't done anything
Levriero SardoOP
You can try by creating a new NextJS project, I have solved this problem by copying the previous project, then moving the new project components to the previous project.
created a new project but it works just fine for me
Yeah, same too
Levriero SardoOP
Oh my, I don't understand anymore, I've followed the steps to reinstall TailwindCSS, but the result is the same.
Levriero SardoOP
windows
Is my install command wrong?
npx create-next-app@latest
no, its correct
Can you try on wsl once?
@Anay-208 | Ping in replies Can you try on wsl once?
Levriero SardoOP
i dont have
@Anay-208 | Ping in replies no, its correct
Levriero SardoOP
hmm
how about you try this? @Levriero Sardo
Levriero SardoOP
wait i will try
Levriero SardoOP
@Clown same error
i have try:
npm uninstall -g create-next-app
npm cache clean --force
npm install -g create-next-app

# create project
npx create-next-app@latest
D:\ProjectWeb>npx create-next-app@latest
√ What is your project named? ... scanhadir-official-web-latest
√ Would you like to use TypeScript? ... No / YesWould you like to use ESLint? ... No / YesWould you like to use Tailwind CSS? ... No / YesWould you like your code inside a `src/` directory? ... No / YesWould you like to use App Router? (recommended) ... No / YesWould you like to use Turbopack for `next dev`? ... No / YesWould you like to customize the import alias (`@/*` by default)? ... No / Yes
Creating a new Next.js app in D:\ProjectWeb\scanhadir-official-web-latest.

Using npm.

Initializing project with template: app-tw


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- @tailwindcss/postcss
- tailwindcss
- eslint
- eslint-config-next
- @eslint/eslintrc


added 401 packages, and audited 402 packages in 1m

166 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created scanhadir-official-web-latest at D:\ProjectWeb\scanhadir-official-web-latest


D:\ProjectWeb>¶cd scanhadir-official-web-latest
'cd' is not recognized as an internal or external command,
operable program or batch file.

D:\ProjectWeb>cd scanhadir-official-web-latest

D:\ProjectWeb\scanhadir-official-web-latest>npm run dev

> scanhadir-official-web-latest@0.1.0 dev
> next dev

 ⚠ You are using a non-standard "NODE_ENV" value in your environment. This creates inconsistencies in the project and is strongly advised against. Read more: https://nextjs.org/docs/messages/non-standard-node-envNext.js 15.4.2
   - Local:        http://localhost:3000
   - Network:      http://192.168.255.224:3000Starting...
 ✓ Ready in 2.3s
 ○ Compiling / ...
 ⨯ ./app/globals.css
Module parse failed: Unexpected character '@' (1:0)
> @import "tailwindcss";
|
| :root {

Import trace for requested module:
./app/globals.css
./app/layout.tsx
 ⨯ ./app/globals.css
Module parse failed: Unexpected character '@' (1:0)
> @import "tailwindcss";
|
| :root {

Import trace for requested module:
./app/globals.css
./app/layout.tsx
 ⨯ ./app/globals.css
Module parse failed: Unexpected character '@' (1:0)
> @import "tailwindcss";
|
| :root {

Import trace for requested module:
./app/globals.css
./app/layout.tsx
 GET / 500 in 12877ms
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: ENOENT: no such file or directory, rename 'D:\ProjectWeb\scanhadir-official-web-latest\.next\cache\webpack\client-development-fallback\0.pack.gz_' -> 'D:\ProjectWeb\scanhadir-official-web-latest\.next\cache\webpack\client-development-fallback\0.pack.gz'
Levriero SardoOP
I asked ai perplexity, chatgpt and claude about this issue, but none of them worked.
This error started to occur when I was developing a website, and suddenly an error occurred with Tailwind, even though I didn't change the default Tailwind config or settings for NextJS.
I moved my erroring project to the old nextjs project that I copied, so I only moved the components and files that I needed, and reinstalled the deps that I needed, and strangely enough it worked
However, some of you have proven that creating a new NextJS project doesn't result in an error, but strangely, I actually get an error.
I strongly advise you to install and try on wsl first.
I've faced similar issue on native windows
Levriero SardoOP
this will be very difficult, but i want a solution without having to change the os
Is this a problem with my device?, but it doesn't seem like it, because it has nothing to do with that.
@Levriero Sardo this will be very difficult, but i want a solution without having to change the os
you are technically just running a linux inside your windows.

You might face similar issues in the future with native windows
Levriero SardoOP
yes i know
what is the name of the software, I forgot
Levriero SardoOP
Is there no other solution?, besides using Linux?
wsl
@Levriero Sardo Is there no other solution?, besides using Linux?
There is definitely a solution, but I recommend using wsl, because even I used it on native windows before and ran into a lot of issues, like random compiling errors even on fresh apps
Levriero SardoOP
I have uninstalled node, and installed the lts version, and tried to create it again, the result is the same error on tailwindcss, is this a problem with the next package or tailwindcss in nextjs?
Levriero SardoOP
finally I can
the problem is with npm not properly installing tailwind in the project
by removing tailwindcss, clearing the cache, then installing it again
bruh