error tailwindcss
Unanswered
Levriero Sardo posted this in #help-forum
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
@Levriero Sardo tailwindcss error, I tried to create a new nextjs project with tailwindcss, but the same error appears
are you using v3 and running v4 code
@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?
@joulev do you have a postcss.config.js/postcss.config.mjs file?
Levriero SardoOP
yes
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 Sardo 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
Can you send a minimal reproduction repository?
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
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 / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like your code inside a `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to use Turbopack for `next dev`? ... No / Yes
√ Would 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-env
▲ Next.js 15.4.2
- Local: http://localhost:3000
- Network: http://192.168.255.224:3000
✓ Starting...
✓ 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
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
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?
@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
@Anay-208 | Ping in replies 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
well the problem is i dont have more space for wsl
i use laptop not pc
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