[SOLVED] NextJS fails to parse tailwind css

NextJS fails to parse tailwind css

I've setup a react app (via create-react-app), which I deployed via Plesk (which I don't know much, but I have to use that...), but it seems nextjs doesn't understand tailwind css. All is fine locally.

Here's the error I get: I have the following error message:

Server Error

ModuleParseError: Module parse failed: Unexpected character '@' (1:0)
File was processed with these loaders:
 * ./node_modules/next/dist/build/webpack/loaders/next-flight-css-loader.js
You may need an additional loader to handle the result of these loaders.
> @tailwind base;
| @tailwind components;
| @tailwind utilities;

tailwind.conf.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

next.conf.js

/** @type {import('next').NextConfig} */

const nextConfig = {}

module.exports = nextConfig

postcss.conf.js

const { join } = require('path');

module.exports = {
  plugins: {
    tailwindcss: {
        config: join(__dirname, 'tailwind.config.js'),
    },
    autoprefixer: {},
  },
}

From what I've seen googling around, this could be a webpack problem, but I don't have any config file...

Any idea?

(I was wondering if using node 16.20.1 could be an issue?)

Solution

Solved the issue, actually had to deploy in production mode.

Shortly:

next.config.js :

module.exports = {
  output: 'standalone',
}

Then move the .next/standalone folder to plesk and set nodejs to use server.js as starting binary. You might also need to copy the public and .next/static folders in app root folder.