error tailwindcss
Unanswered
Pug posted this in #help-forum
PugOP
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
@Pug 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
@Clown You likely do not have postcss installed or tailwindcss's postcss plugin isnt installed or configured
PugOP
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 10msi 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
@Pug 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?
PugOP
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
PugOP
Oh my, I don't understand anymore, I've followed the steps to reinstall TailwindCSS, but the result is the same.
PugOP
windows
Is my install command wrong?
npx create-next-app@latestno, its correct
Can you try on wsl once?
@Anay-208 Can you try on wsl once?
PugOP
i dont have
@Anay-208 no, its correct
PugOP
hmm
PugOP
wait i will try
PugOP
@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@latestD:\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'PugOP
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
PugOP
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.
@Pug 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
PugOP
yes i know
what is the name of the software, I forgot
PugOP
Is there no other solution?, besides using Linux?
wsl
@Pug 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 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
PugOP
well the problem is i dont have more space for wsl
i use laptop not pc
PugOP
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?
PugOP
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