如何打包可复用的Tailwind v4自定义主题为npm包

下面是实现可复用Tailwind自定义主题npm包的完整步骤，能让你在多个项目中直接使用主题类（如bg-primary-50）：

1. 初始化主题npm包 #

• 创建新文件夹作为包目录，执行初始化命令：

  mkdir tailwind-custom-theme && cd tailwind-custom-theme
  npm init -y
  

• 安装Tailwind CSS作为开发依赖（@theme指令需要Tailwind v3.1+支持）：

  npm install tailwindcss --save-dev
  

2. 编写自定义主题文件 #

在包目录下创建src/theme.css文件，写入自定义主题代码：

@import "tailwindcss";

@theme {
  --color-primary-50: #eff6ff;
  --color-primary-500: #3b82f6;
  --color-primary-900: #1e3a8a;

  --font-family-brand: "Inter", sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;

  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;

  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
}

3. 配置package.json #

修改package.json关键配置，确保包能被正确识别和依赖：

{
  "name": "tailwind-custom-theme",
  "version": "1.0.0",
  "main": "src/theme.css", // 指定主题文件入口
  "peerDependencies": {
    "tailwindcss": ">=3.1.0" // 要求消费端使用兼容版本的Tailwind
  },
  "files": [
    "src/theme.css" // 指定发布到npm的文件
  ]
}

4. 发布npm包 #

公开包直接执行发布命令，私有包添加--access private参数：

npm publish

消费端项目使用步骤 #

1. 安装主题包 #

在目标项目中安装你的主题包：

npm install tailwind-custom-theme

2. 配置项目的Tailwind CSS #

在项目的主CSS文件（如src/index.css）中导入主题包，并保留Tailwind基础指令：

@import 'tailwind-custom-theme/src/theme.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

3. 验证主题生效 #

直接在项目中使用自定义主题类：

<div class="bg-primary-50">This is some text</div>

注意事项 #

• 确保消费端项目的Tailwind CSS版本在v3.1.0及以上，否则@theme指令无法生效
• 如果主题中使用了自定义字体（如示例中的Inter），需要在消费端项目中自行引入字体资源（比如通过Google Fonts链接）

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