Vite构建Tailwind v4 CSS失败问题排查求助

问题背景 #

我有一个长期使用Tailwind v3的Svelte项目，采用Vite构建、Vercel部署。升级到Tailwind v4及一批依赖后，vite dev时CSS正常加载，但vite build、vite preview或部署到Vercel时，提示找不到style.css。已尝试添加@config兼容语句、修正Tailwind配置的content字段，问题仍未解决。

解决方案 #

1. 修正CSS文件的引入方式 #

生产环境中src目录不会被直接暴露在根路径下，直接在app.html中引用/src/style.css会导致路径失效。将CSS导入移到SvelteKit的根布局组件：

• 打开./src/app.html，删除以下代码行：

  <link href="/src/style.css" rel="stylesheet">
  

• 在./src/routes/+layout.svelte中导入样式文件（若文件不存在则创建）：

  <script>
    import '../style.css';
  </script>
  
  <slot />
  

2. 统一配置文件的模块格式 #

项目package.json中设置了"type": "module"，但Tailwind配置使用.cjs格式会导致模块解析冲突，需改为ES模块格式：

• 将./tailwind.config.cjs重命名为./tailwind.config.mjs，并修改导出语法：

  export default {
    content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'],
    plugins: [import('flowbite/plugin')],
    darkMode: 'class',
    theme: {
      extend: {
        colors: {
          primary: {
            50: '#FFF5F2',
            100: '#FFF1EE',
            200: '#FFE4DE',
            300: '#FFD5CC',
            400: '#FFBCAD',
            500: '#FE795D',
            600: '#EF562F',
            700: '#EB4F27',
            800: '#CC4522',
            900: '#A5371B'
          }
        }
      }
    }
  };
  

• 修改./src/style.css中的@config路径：

  @import "tailwindcss";
  @config "../tailwind.config.mjs";
  

3. 移除Vite配置中的自定义输出目录 #

SvelteKit有默认的构建输出约定，手动设置outDir: './public'会打乱资源打包路径，导致CSS文件无法被正确引用：
修改./vite.config.ts，删除build字段：

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

export default defineConfig({
    plugins: [sveltekit(), tailwindcss()]
});

4. 调整依赖版本兼容性 #

当前Vite 6与SvelteKit 2存在兼容性问题，需降级到SvelteKit推荐的Vite版本；同时确保Flowbite相关依赖支持Tailwind v4：
更新./package.json中的依赖版本：

{
  "devDependencies": {
    "@sveltejs/kit": "^2.4.0",
    "mdi-svelte": "^1.1.2",
    "svelte": "^5.40.0",
    "svelte-copy": "^2.0.0",
    "vite": "^5.4.10"
  },
  "dependencies": {
    "@mdi/js": "^7.4.47",
    "@sveltejs/adapter-vercel": "^5.10.3",
    "@tailwindcss/vite": "^4.1.14",
    "tailwindcss": "^4.1.14",
    "flowbite": "^3.1.2",
    "flowbite-svelte": "^0.44.22"
  }
}

执行npm install更新依赖后，重新运行vite build和vite preview验证问题是否解决。

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