tailwind not compiling styles with nextjs custom servers

[ivanjeremic]

If I do my custom nextjs server tailwind does not work?

import next from "next";

const dev = process.env.NODE_ENV !== "production";
const app = next({
  dev
});
const handle = app.getRequestHandler();

https://nextjs.org/docs/pages/building-your-application/configuring/custom-server

I self-host nextjs and use other custom servers for that but tailwind for some reason does not know how to deal with this.

[christian-bromann]

@adamwathan any comments why this was moved into a discussion thread without commenting on it?

[christian-bromann]

I found a workaround which is doing what next dev is doing (see https://github.com/webdriverio-community/wdio-next-service/blob/main/src/launcher.ts#L43-L80) however that is rather sub-optimal as it doesn't allow me to provide custom Next.js configurations.

[ivanjeremic]

@adamwathan any comments why this was moved into a discussion thread without commenting on it?

found that weird as well.

[brendanmorrell]

this may not be your issue, but using a custom server in my app requires custom scripts for dev/build/start etc, and none of these had postcss commands in them, so i added:

    "build:css": "postcss src/styles/globals.css -o src/styles/output.css",
    "dev:css": "postcss src/styles/globals.css -o src/styles/output.css --watch",

and && yarn build:css to my build command, and & yarn dev:css in my dev scripts (the & in dev and && in prod is intentional)

after that, the tailwind css started showing up in the app both in dev and built

[zhabinsky]

This worked for me

postcss.config.js

const path = require("path");

const tailwindConfigPath = path.resolve(__dirname, "./tailwind.config.js");

console.log({ tailwindConfigPath });

module.exports = {
  plugins: {
    tailwindcss: {
      config: tailwindConfigPath,
    },
    autoprefixer: {},
  },
};

[nosu-park]

enable turbopack

const app = next({
  dev,
  turbo: true,
});