Tailwind not working on preview/production, when compiled on a api route

Heya I have a issue with tailwind on preview/production. I am compiling tailwind on the api, it works fine on my local environment, but on preview and I am assuming production. I get this error "ENOENT: no such file or directory, open '/var/task/node_modules/tailwindcss/lib/css/preflight.css'"

Current versus Expected behavior

I except my tailwind styles to generated from the provided classes. However I receive this error "ENOENT: no such file or directory, open '/var/task/node_modules/tailwindcss/lib/css/preflight.css'"

It is a similar issue to this Github discussion on the Vercel repo https://github.com/orgs/vercel/discussions/4004

Code, configuration, and steps that reproduce this issue

The Github discussion contains my exact problem.

Project information

Environment ( preview, production):
Project Framework: Next.js
Build Settings:
  Framework Preset:
  Build Command (if not default):
  Output Directory (if not default):
  Install Command (if not default):
Node/Runtime Version: 20.13.1
Package Manager: pnpm@9.7.1
Relevant Packages: tailwindcss

Vercel Alum

Hi, ! Welcome to the Vercel Community

Sorry to hear you've been seeing this issue. Could you share a minimal reproducible example with us? That would help us dig deeper on what you're seeing exactly.

Hi , you can use this https://github.com/wstrother/streaming-app/tree/dev/mrp-vercel-tailwind as the example.

Also potentially it could be because tailwind is not part of this list? https://nextjs.org/docs/app/api-reference/next-config-js/serverExternalPackages

any update on this, or maybe do you need me to provide a new minimal example? I am also testing the idea of running a postinstall script to copy the correct files during the build process.

Something like "postinstall": "node ./utils/copy_assets.js"

//copy_assets.js
import { createReadStream, createWriteStream, existsSync, mkdirSync } from "fs";
import { basename, resolve } from "path";

const output_dir = "../../var/task/node_modules/tailwindcss/lib/css/"; // The directory where files will be copied.
const assets = [
  "../../node_modules/tailwindcss/lib/css/preflight.css", // Adjusted path to reflect the new structure
];

if (process.env.VERCEL) {
  assets.forEach((asset_path) => {
    const filename = basename(asset_path); // Extract the filename from the path.
    const outputPath = resolve(output_dir, filename); // Resolve the full output path.

    // Create the output directory if it doesn't exist
    if (!existsSync(output_dir)) {
      mkdirSync(output_dir, { recursive: true });
    }

    // Copy the file from node_modules to the public directory
    createReadStream(resolve(asset_path)).pipe(createWriteStream(outputPath));
  });
}

But I am unsure where to place the file as I have a monorepo with a nitro server which compiles my tailwind styles.

Update doing this does not work still receiving the error "ENOENT: no such file or directory, open '/var/task/node_modules/tailwindcss/lib/css/preflight.css'"

This topic is closed. It no longer accepts new replies.

any update on this, or maybe do you need me to provide a new minimal example? I am also testing the idea of running a postinstall script to copy the correct files during the build process.

Something like "postinstall": "node ./utils/copy_assets.js"

//copy_assets.js
import { createReadStream, createWriteStream, existsSync, mkdirSync } from "fs";
import { basename, resolve } from "path";

const output_dir = "../../var/task/node_modules/tailwindcss/lib/css/"; // The directory where files will be copied.
const assets = [
  "../../node_modules/tailwindcss/lib/css/preflight.css", // Adjusted path to reflect the new structure
];

if (process.env.VERCEL) {
  assets.forEach((asset_path) => {
    const filename = basename(asset_path); // Extract the filename from the path.
    const outputPath = resolve(output_dir, filename); // Resolve the full output path.

    // Create the output directory if it doesn't exist
    if (!existsSync(output_dir)) {
      mkdirSync(output_dir, { recursive: true });
    }

    // Copy the file from node_modules to the public directory
    createReadStream(resolve(asset_path)).pipe(createWriteStream(outputPath));
  });
}

But I am unsure where to place the file as I have a monorepo with a nitro server which compiles my tailwind styles.