TailwindCSS v4部署至Vercel失效问题求助（SvelteKit环境）

针对本地运行正常、Vercel部署后TailwindCSS失效的情况，可按以下步骤排查解决：

1. 调整Vite插件加载顺序 #

Vite插件按数组顺序执行，TailwindCSS需要先于SvelteKit处理样式。修改vite.config.ts：

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

export default defineConfig({
  plugins: [tailwindcss(), sveltekit()] // 将tailwindcss移到sveltekit前面
});

2. 确认全局样式已在根布局中引入 #

检查src/routes/+layout.svelte是否正确导入全局样式文件，确保内容如下：

<script>
  import '../app.css';
</script>

<slot />

3. 明确指定TailwindCSS的内容扫描路径 #

TailwindCSS v4默认会扫描项目文件，但部署环境下可能存在路径识别问题，可在Vite配置中显式指定扫描范围：

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

export default defineConfig({
  plugins: [
    tailwindcss({
      content: ['./src/**/*.{svelte,ts,js,html}']
    }),
    sveltekit()
  ]
});

4. 清理Vercel缓存并重新部署 #

Vercel的构建缓存可能导致旧配置残留，进入项目控制台找到对应部署记录，点击「Redeploy」并勾选「Clear build cache」选项，重新触发构建。

5. 验证Vercel构建命令 #

确保Vercel项目设置中的构建命令与package.json一致，建议设置为npm run build（若使用pnpm或yarn则对应调整），避免依赖安装不完整。

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