Svelte组件库导出集成Tailwind配置、基础CSS的问题排查

以下是几个可行的解决方案，针对你遇到的border-border类不存在的构建错误：

1. 修正Tailwind配置的合并逻辑 #

你提到合并组件库Tailwind配置无效，但直接复制就可以解决，核心问题是合并方式不对，导致组件库的theme配置没有被完整继承。border-border是ShadCN-Svelte依赖的自定义颜色类，对应组件库Tailwind配置中theme.colors.border的值。

正确的合并方式要确保组件库的theme被完整合并到应用配置中，同时保留应用自身的自定义配置：

// 应用根目录的tailwind.config.js
import componentConfig from '@XYZ/ABC/tailwind.config.js';

export default {
  // 必须添加组件库的文件路径，让Tailwind扫描到组件内使用的类
  content: [
    './src/**/*.{html,js,svelte,ts}',
    './node_modules/@XYZ/ABC/**/*.{html,js,svelte,ts}'
  ],
  // 先继承组件库的完整theme，再用extend添加应用自己的样式
  theme: {
    ...componentConfig.theme,
    extend: {
      // 这里放应用专属的theme配置，比如额外颜色、字体等
    }
  },
  // 继承组件库的Tailwind插件
  plugins: [...componentConfig.plugins]
};

如果组件库的theme本身用了extend，可以调整为：

theme: {
  extend: {
    ...componentConfig.theme.extend,
    // 应用自己的extend配置
  }
}

2. 检查样式文件的导入顺序 #

组件库的PCSS文件必须在Tailwind的基础指令之后导入，否则自定义类无法被正确解析：

// 应用的根样式文件（比如src/app.pcss）
@tailwind base;
@tailwind components;
@tailwind utilities;

// 放在Tailwind指令之后导入组件库样式
@import '@XYZ/ABC/ABC.pcss';

3. 验证组件库的exports配置 #

确保组件库package.json的exports字段能正确暴露Tailwind配置和PCSS文件，避免路径解析错误：

// 组件库的package.json
{
  "exports": {
    ".": "./dist/index.js",
    "./ABC.pcss": "./dist/ABC.pcss",
    "./tailwind.config.js": "./tailwind.config.js"
  }
}

注意：Tailwind配置文件不需要打包，直接暴露源码即可；如果PCSS是打包后的产物，要确保路径指向dist目录的正确文件。

4. 清除缓存后重新构建 #

Vite或Tailwind的缓存可能导致配置未生效，执行以下命令清除缓存后重新构建：

rm -rf node_modules/.vite
npm run build

如果还是不行，可以尝试删除node_modules和package-lock.json，重新安装依赖后再构建。

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