从外部包导入Tailwind v4主题设置，消费者应用无法访问主题变量

方案一：通过导出Tailwind配置让消费者继承（推荐） #

这种方式符合Tailwind的设计逻辑，消费者可以灵活复用或扩展你的主题配置。

1. 重构组件库的Tailwind配置 #

• 在组件库根目录创建tailwind.config.js，把主题和插件配置移到这里：

import tailwindTypography from '@tailwindcss/typography';

export default {
  plugins: [tailwindTypography],
  theme: {
    extend: {
      colors: {
        blue: {
          50: '#f3f7fc',
        },
      },
      fontFamily: {
        figtree: ['Figtree', 'sans-serif'],
      },
    },
  },
};

• 修改库的主CSS文件（比如src/styles/app.css），移除@theme块（主题配置现在由tailwind.config.js管理）：

@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
@import 'tailwindcss';

@layer base {
  body {
    font-family: 'Figtree';
  }

  h1 {
    font-size: 32px;
  }

  h2 {
    font-size: 26px;
  }

  h3 {
    font-size: 22px;
  }

  h4 {
    font-size: 20px;
  }
}

• 在组件库的package.json中，添加tailwind.config.js到可导出文件列表：

{
  "files": [
    "dist",
    "tailwind.config.js"
    // 保留你原来的其他导出文件
  ]
}

2. 消费者应用配置 #

• 在消费者应用的tailwind.config.js中，导入并合并组件库的配置：

import libraryTailwindConfig from '你的组件库包名/tailwind.config.js';

export default {
  // 消费者自己的基础配置
  theme: {
    extend: {
      // 合并组件库的主题扩展
      ...libraryTailwindConfig.theme.extend,
    },
  },
  plugins: [
    // 导入组件库使用的插件
    ...libraryTailwindConfig.plugins,
  ],
};

• 在消费者应用的入口布局文件（比如src/routes/+layout.svelte）中，导入组件库的样式：

<script>
  import '你的组件库包名/dist/app.css';
</script>

方案二：全局暴露主题CSS变量 #

如果消费者不想修改自身的Tailwind配置，可通过将主题变量挂载到:root实现全局可用：

• 修改组件库的主CSS文件，在@layer base中添加变量映射：

@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
@import 'tailwindcss';
@plugin '@tailwindcss/typography';

@theme {
  --color-blue-50: #f3f7fc;
}

@layer base {
  :root {
    --color-blue-50: var(--color-blue-50);
    // 为所有需要暴露的主题变量添加映射
  }

  body {
    font-family: 'Figtree';
  }

  /* 其他base样式... */
}

• 消费者只需导入组件库的CSS文件，就能直接使用bg-blue-50这类工具类。

注意：方案二的灵活性较差，消费者无法扩展你的主题配置，仅适合简单场景。

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