Vercel部署SvelteKit项目时Tailwind运行异常问题排查

近期在Vercel部署SvelteKit项目，其中一个用于接收工具类并编程式调用Tailwind的API端点无法正常工作。该端点在本地环境（执行vite dev或vite build && vite preview）运行正常，但部署到Vercel后触发500错误。

错误堆栈 #

Error: ENOENT: no such file or directory, open '/var/task/node_modules/tailwindcss/lib/css/preflight.css'
    at Object.openSync (node:fs:603:3)
    at Object.readFileSync (node:fs:471:35)
    at preflight (/var/task/node_modules/tailwindcss/lib/corePlugins.js:491:66)
    at registerPlugins (/var/task/node_modules/tailwindcss/lib/lib/setupContextUtils.js:794:61)
    at createContext (/var/task/node_modules/tailwindcss/lib/lib/setupContextUtils.js:1196:5)
    at getContext (/var/task/node_modules/tailwindcss/lib/lib/setupContextUtils.js:1253:19)
    at /var/task/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:118:81
    at /var/task/node_modules/tailwindcss/lib/processTailwindFeatures.js:48:11
    at plugins (/var/task/node_modules/tailwindcss/lib/plugin.js:38:69)
    at LazyResult.runOnRoot (/var/task/node_modules/postcss/lib/lazy-result.js:357:16) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/var/task/node_modules/tailwindcss/lib/css/preflight.css'
}

错误显示node_modules/tailwindcss/lib/css/preflight.css文件缺失。需注意的是，Vite构建时调用Tailwind生成静态CSS的过程完全正常，只有API端点编程式调用Tailwind时才会出错。

package.json配置 #

{
    "name": "streaming-app",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "preview": "vite preview",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
        "lint": "prettier --plugin-search-dir . --check . && eslint .",
        "format": "prettier --plugin-search-dir . --write .",
        "test": "vitest"
    },
    "devDependencies": {
        "@fullhuman/postcss-purgecss": "^5.0.0",
        "@sveltejs/adapter-auto": "^2.0.0",
        "@sveltejs/kit": "^1.20.4",
        "@testing-library/svelte": "^4.0.3",
        "@types/jest": "^29.5.3",
        "@types/node": "^20.5.7",
        "@types/obs-studio": "^2.17.0",
        "@typescript-eslint/eslint-plugin": "^5.45.0",
        "@typescript-eslint/parser": "^5.45.0",
        "eslint": "^8.28.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-plugin-svelte": "^2.30.0",
        "jsdom": "^22.1.0",
        "postcss-load-config": "^4.0.1",
        "prettier": "^2.8.0",
        "prettier-plugin-svelte": "^2.10.1",
        "supabase": "^1.82.2",
        "svelte": "^4.0.5",
        "svelte-check": "^3.4.3",
        "tslib": "^2.4.1",
        "typescript": "^5.0.0",
        "vite": "^4.4.2",
        "vite-plugin-tailwind-purgecss": "^0.1.3",
        "vitest": "^0.34.1",
        "vitest-svelte-kit": "^0.0.7"
    },
    "type": "module",
    "dependencies": {
        "@supabase/auth-helpers-sveltekit": "^0.10.2",
        "@supabase/supabase-js": "^2.33.1",
        "cssnano": "^6.0.1",
        "postcss": "^8.4.29",
        "tailwindcss": "^3.3.3",
        "autoprefixer": "^10.4.14",
        "@skeletonlabs/skeleton": "^2.0.0",
        "@skeletonlabs/tw-plugin": "^0.1.0",
        "@tailwindcss/typography": "^0.5.9"
    }
}

由于新增了编程式使用Tailwind的功能，已将Tailwind、Postcss、Cssnano、Skeleton和Autoprefixer从开发依赖移至生产依赖。本地生产构建预览时端点运行正常，但部署到Vercel后出错。执行过npm i {packagename} -P、npm upgrade和npm i --package-lock-only确保依赖配置正确。

补充配置文件 #

vite.config.ts #

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [sveltekit()],
    test: {
        globals: true,
        environment: 'jsdom'
    }
});

曾尝试修改vite配置添加css.postcss，但重新部署后问题未解决：

export default defineConfig({
    plugins: [sveltekit()],
    test: {
        globals: true,
        environment: 'jsdom'
    },
    css: {
        postcss,
    }
});

postcss.config.cjs #

const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');

const config = {
    plugins: [
        //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
        tailwindcss(),
        //But others, like autoprefixer, need to run after,
        autoprefixer
    ]
};

module.exports = config;

tailwind.config.ts #

import { join } from 'path'
import type { Config } from 'tailwindcss'
import { skeleton } from '@skeletonlabs/tw-plugin'
import typography from '@tailwindcss/typography'

const config = {
    darkMode: 'class',
    content: [
        './src/**/*.{html,js,svelte,ts}',
        join(require.resolve(
            '@skeletonlabs/skeleton'),
            '../**/*.{html,js,svelte,ts}'
        )
    ],
    theme: {
        extend: {},
    },
    plugins: [
        skeleton({
            themes: { preset: [ "skeleton" ] }
        }),
        typography
    ]
} satisfies Config;

export default config;

API端点代码（src/routes/api/css/+server.ts） #

import { json } from '@sveltejs/kit'
import type { RequestHandler } from '@sveltejs/kit'

import postcss from 'postcss'
import tailwindcss from 'tailwindcss'
import cssnano from 'cssnano'
import autoprefixer from 'autoprefixer'
import { skeleton } from '@skeletonlabs/tw-plugin'
import typography from '@tailwindcss/typography'

const sourceCSS = '@tailwind components; @tailwind utilities';

export const GET: RequestHandler = async ({ url }) => {
    const classNames = url.searchParams.get('css') ?? ''
    const rawContent = [{raw: classNames, extension: 'html'}]
    // use safelist instead of rawContent
    // pre-render on page load and cache against local storage

    const compiledCss = await postcss([
        tailwindcss({
            content: rawContent,
            plugins: [
                skeleton({themes: {preset: ["skeleton"]}}),
                typography
            ]
        }),
        autoprefixer(),
        cssnano()
    ]).process(sourceCSS)
    

    return json({output: compiledCss.css})
};

svelte.config.js #

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: [vitePreprocess({})],

    kit: {
        adapter: adapter()
    }
};

export default config;

src/app.postcss #

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

html, body { @apply h-full overflow-hidden; }

body {
    background-color: rgba(0, 0, 0, 0);
    font-family: 'helvetica'
}
input[type=text],input[type=password] {
    @apply input variant-form-material text-sm p-1 text-white;
}

:root {
    --nav-height: 30px;
}
#main-nav {
    height: var(--nav-height);
}
.faux-bg {
    @apply absolute w-[100vw] h-[100vh] left-0;
    top: var(--nav-height);
}


.layout-node-edit:not(:has(div:hover)):hover {
    outline: 2px solid gold;
}

.layout-node-active {
    outline: 4px solid gold;
}

内容的提问来源于stack exchange，提问作者Wyatt Strother