Next.js Discord

Discord Forum

PostCSS not working on Next.js and Tailwind

Answered
aardani posted this in #help-forum
Open in Discord
aardaniOP
The guide i follow over at taiwlind does not work on Next.js.
To reproduce, I created a new project to test it out.

1. npx create-next-app@latest . with tailwindcss, appdir, eslint and typescript
2. changed globals.css to globals.postcss
3. changed import ./globals.css to import ./globals.postcss at layout.

Minimal reproduction repository:
https://github.com/alfonsusac/next-13414-postcss
https://codesandbox.io/p/sandbox/compassionate-mountain-dhnmrs

The error produced is:
./app/globals.postcss
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;
Answered by joulev
the cause is that nextjs doesn't configure webpack to run postcss on .postcss files. but postcss is run on .css files, so just use globals.css. about the editor being dumb, see https://discord.com/channels/752553802359505017/913087384302813246/1142018118370209872
View full answer

3 Replies

joulev
the cause is that nextjs doesn't configure webpack to run postcss on .postcss files. but postcss is run on .css files, so just use globals.css. about the editor being dumb, see https://discord.com/channels/752553802359505017/913087384302813246/1142018118370209872
Answer
joulev
confirmation that globals.css works
aardaniOP
Additional material from joulev's comment:
Next.js compiles CSS for its built-in CSS support using PostCSS.
[source](https://nextjs.org/docs/pages/building-your-application/configuring/post-css#default-behavior)

Possible solution:
Configure webpack to run pon postcss (idk how)

Possible workaround:
1. Install csstools, and change language to PostCSS (this would lose features from TailwindCSS Intellisense)

2. disable CSS validate at vscode settings (CSS: Validate)