Turborepo中Svelte共享UI库Tailwind v4内联样式失效求助

核心问题 #

在Turborepo的共享UI库@repo/ui中，组件内直接使用Tailwind CSS类的内联样式在web应用中无法正常渲染，但通过styles.css文件用@apply指令应用相同Tailwind类时，组件样式能正常显示。

背景 #

我基于Turborepo搭建了一个单体仓库，包含两个Svelte应用（web和docs）以及共享Svelte组件库@repo/ui，采用Tailwind CSS v4进行样式开发。参考Turborepo的with-svelte示例，将with-tailwind的Next.js配置适配到Svelte后出现异常，未找到相关解决方案。

场景复现 #

内联样式不生效场景 #

在@repo/ui的Button组件中直接写入Tailwind类：

<!-- src/Button.svelte -->
<button
    class="mb-3 rounded-xl bg-[var(--green-1000)] ..."
>
    click
</button>

• 运行pnpm dev后，web应用中的按钮仅显示文字，无任何样式；
• 执行pnpm --filter=@repo/ui build:styles后，packages/ui/dist/styles.css会生成对应样式，但web应用仍无法加载该样式；
• 重新运行pnpm dev后，dist/styles.css文件内容消失。

外部样式生效场景 #

将样式定义在src/styles.css中，通过@apply指令应用Tailwind类：

<!-- src/Button.svelte -->
<button>
    click
</button>

@import 'tailwindcss';
@import '@repo/tailwind-config';

button {
  @apply mb-3 rounded-xl bg-[var(--green-1000)] ...;
}

此时组件在web应用中可正常渲染样式。

推测原因 #

• @repo/ui中tailwindcss/vite与tailwindcss/cli可能存在冲突，但移除其中一个依赖后问题仍未解决；
• Tailwind CSS v3中通过tailwind.config.js将UI库添加为内容源的方案在v4中不适用，因为v4已不再使用该配置文件。

@repo/ui的package.json配置 #

{
  "name": "@repo/ui",
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev:components": "svelte-kit sync && svelte-package --watch --input=src",
    "dev:styles": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch",
    "build:components": "svelte-kit sync && svelte-package --input=src",
    "build:styles": "tailwindcss -i ./src/styles.css -o ./dist/styles.css",
    "lint": "eslint .",
    "check-types": "svelte-check --tsconfig ./tsconfig.json"
  },
  "files": [
    "dist",
    "!dist/**/*.test.*",
    "!dist/**/*.spec.*",
    "src",
    "!src/**/*.test.*",
    "!src/**/*.spec.*"
  ],
  "sideEffects": [
    "**/*.css"
  ],
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "svelte": "./dist/index.js"
    },
    "./styles.css": "./dist/styles.css"
  },
  "peerDependencies": {
    "svelte": "^5.0.0"
  },
  "devDependencies": {
    "@repo/eslint-config": "workspace:*",
    "@repo/tailwind-config": "workspace:*",
    "@repo/typescript-config": "workspace:*",
    "@sveltejs/kit": "^2.21.1",
    "@sveltejs/package": "^2.0.0",
    "@sveltejs/vite-plugin-svelte": "^5.0.0",
    "@tailwindcss/cli": "^4.1.5",
    "eslint": "^9.27.0",
    "prettier": "^3.5.3",
    "prettier-plugin-tailwindcss": "^0.6.11",
    "svelte": "^5.30.2",
    "svelte-check": "^4.2.1",
    "typescript": "5.8.2",
    "vite": "^6.3.2",
    "tailwindcss": "^4.1.7"
  }
}

求助 #

有没有遇到过类似问题的开发者？或者能提供一个可正常运行的Svelte v5 + Tailwind CSS v4 + Turborepo共享UI库的配置方案？

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