如何在Tailwind预设中使用自定义CSS颜色变量？

我正在使用Tailwind 3构建多颜色主题，且该主题将用于多个应用。我希望制作一个预设并将其作为依赖添加到代码仓库中，但遇到以下问题：我的主题严重依赖CSS变量来运行，结构如下：

index.css

@layer base {
    :root {
        --default-color: 255,255,255;
    }
    #bright-theme {
        --default-color: 0,0,0;
    }
    /* 更多主题定义 */
}

tailwind-config.js

module.exports={
    theme: {
        extend: {
            colors: {
                'element-base': `rgba(var(--default-color))`,
                // 其他颜色定义
            }
        }
    }
}

是否有办法将CSS变量与主题一同发布？否则这样做毫无意义。我可以根据需要更改预设/主题的结构。由于存在多个变体，我无法使用Tailwind的dark mode选项。此设置在本地可行，但我希望能将其从npm包导出，却不知道如何让CSS变量方案与Tailwind预设配合使用。

完全可以实现，只需把CSS变量样式文件和Tailwind预设配置打包到同一个npm包中，具体步骤如下：

1. 调整npm包目录结构 #

整理你的主题包目录，确保样式和配置分离且易于引用：

your-custom-tailwind-theme/
├── src/
│   ├── styles/
│   │   └── base.css    # 存放CSS变量定义，即原index.css内容
│   └── tailwind-preset.js  # 导出Tailwind预设配置
├── package.json
└── README.md

2. 编写Tailwind预设文件 #

在tailwind-preset.js中直接导出你的主题配置：

module.exports = {
  theme: {
    extend: {
      colors: {
        'element-base': `rgba(var(--default-color))`,
        // 其他颜色定义
      }
    }
  }
}

3. 配置package.json #

在package.json中指定包的核心信息，确保必要文件被发布：

{
  "name": "your-custom-tailwind-theme",
  "version": "1.0.0",
  "main": "src/tailwind-preset.js",
  "files": [
    "src/styles/",
    "src/tailwind-preset.js"
  ],
  "peerDependencies": {
    "tailwindcss": "^3.0.0"
  }
}

• files字段：明确告诉npm要包含哪些文件，避免遗漏样式或配置
• peerDependencies：声明依赖的Tailwind版本，避免项目中重复安装多个Tailwind实例

4. 在目标应用中使用主题包 #

4.1 安装依赖 #

npm install your-custom-tailwind-theme

4.2 引入CSS变量样式 #

在应用的主CSS文件（如src/index.css）中，先导入主题包的样式，再引入Tailwind指令：

@import 'your-custom-tailwind-theme/src/styles/base.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

4.3 配置Tailwind使用预设 #

修改应用的tailwind.config.js，引入你的主题预设：

const customTheme = require('your-custom-tailwind-theme');

module.exports = {
  presets: [customTheme],
  // 其他项目专属的Tailwind配置（如content路径等）
}

额外优化建议 #

• 可以在package.json中添加exports字段，简化导入路径：

{
  "exports": {
    "./preset": "./src/tailwind-preset.js",
    "./styles": "./src/styles/base.css"
  }
}

之后在应用中就能用更简洁的方式导入：

@import 'your-custom-tailwind-theme/styles';

const customTheme = require('your-custom-tailwind-theme/preset');

• 若主题数量较多，可将每个主题的CSS变量拆分为单独文件，再在base.css中统一导入，提升维护性。

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