# @bobthered/tailwindcss-palette-generator 中文文档

规范地址：https://npmcn.com/package/%40bobthered/tailwindcss-palette-generator/

版本：4\.0\.0
npm 元数据更新时间：2024-10-12T18:08:58.371Z
中文译文更新时间：2026-11-08T09:49:33.563Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40bobthered/tailwindcss-palette-generator
原文对照：https://npmcn.com/package/%40bobthered/tailwindcss-palette-generator/?lang=original
项目主页：https://github.com/bobthered/tailwindcss-palette-generator#readme
源码仓库：https://github.com/bobthered/tailwindcss-palette-generator

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：23.8 kB，9 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2020-08-21T17:48:36.279Z
- 最新版本发布：2024-10-12T18:08:58.192Z
- 近 30 天下载量：4835（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：12（近 12 个月 0 个）

## 中文简介

快速从基色或克色生成尾风色调色板.

## 安装

```sh
npm install @bobthered/tailwindcss-palette-generator
```

也可以使用：`pnpm add @bobthered/tailwindcss-palette-generator`、`yarn add @bobthered/tailwindcss-palette-generator`、`bun add @bobthered/tailwindcss-palette-generator`

## README

![](https://raw.githubusercontent.com/bobthered/tailwindcss-palette-generator/main/assets/logo-tailwindcss.png)

# 调色板生成器

### 快速生成 [尾风](https://www.tailwindcss.com/) 颜色调色板来自底色或颜色.

[![NPM](https://badge.fury.io/js/%40bobthered%2Ftailwindcss-palette-generator.svg)](https://badge.fury.io/js/%40bobthered%2Ftailwindcss-palette-generator)

[演示](https://npmcn.com/package/%40bobthered/tailwindcss-palette-generator/#readme-demo) 二. 支助 [关键特性](https://npmcn.com/package/%40bobthered/tailwindcss-palette-generator/#readme-key-features) 二. 支助 [安装](https://npmcn.com/package/%40bobthered/tailwindcss-palette-generator/#readme-installation) 二. 支助 [使用量](https://npmcn.com/package/%40bobthered/tailwindcss-palette-generator/#readme-usage) 二. 支助 [实例](https://npmcn.com/package/%40bobthered/tailwindcss-palette-generator/#readme-examples)

## 演示

交互式 [演示](https://bobthered.github.io/tailwindcss-palette-generator) 生成尾风调色板

## 关键特性

-   生成小于十六进制值的调色板( N) [见示例](https://npmcn.com/package/%40bobthered/tailwindcss-palette-generator/#readme-example-1) (中文(简体) )
-   生成多色调色板( E) [见示例](https://npmcn.com/package/%40bobthered/tailwindcss-palette-generator/#readme-example-2) (中文(简体) )
-   自定义调色板阴影名称和亮度( L) [见示例](https://npmcn.com/package/%40bobthered/tailwindcss-palette-generator/#readme-example-3) (中文(简体) )
-   自动应用或可覆盖的默认颜色命名( N) [见示例](https://npmcn.com/package/%40bobthered/tailwindcss-palette-generator/#readme-example-4) (中文(简体) )
-   0) 依赖关系
-   字体支持
-   保留应用颜色

## 安装

```
npm i @bobthered/tailwindcss-palette-generator
```

## 选项

这个 `tailwindcssPaletteGenerator()` 函数只收到一个参数.

| 选项类型 | 类型 |
| --- | --- |
| `String` | `string` |
| `Array of Strings` | `string[]` |
| `Object` | `{     colors?: string[],     names?: string[],     preserve?: boolean,     shades?: Record<string | number, number>[],   }` |

## 使用量

### 示例 - 基础

```js
// tailwind.config.js
import { tailwindcssPaletteGenerator } from '@bobthered/tailwindcssPaletteGenerator';

export default {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
        extend: {
            colors: tailwindcssPaletteGenerator('#FF0040')
        }
    },
    plugins: []
};
```

### 示例 - 多颜色

```js
// tailwind.config.js
import { tailwindcssPaletteGenerator } from '@bobthered/tailwindcssPaletteGenerator';

export default {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
        extend: {
            colors: tailwindcssPaletteGenerator(['#FF0040', '#FFBB00'])
        }
    },
    plugins: []
};
```

### 示例 - 自定义阴影和亮度

```js
// tailwind.config.js
import { tailwindcssPaletteGenerator } from '@bobthered/tailwindcssPaletteGenerator';

export default {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
        extend: {
            colors: tailwindcssPaletteGenerator({
                colors: ['#FF0040'],
                shades: [
                    { name: 'light', lightness: 95 },
                    { name: 'normal', lightness: 46 },
                    { name: 'dark', lightness: 7 }
                ]
            })
        }
    },
    plugins: []
};
```

### 示例 - 覆盖颜色名称

```js
// tailwind.config.js
import { tailwindcssPaletteGenerator } from '@bobthered/tailwindcssPaletteGenerator';

export default {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
        extend: {
            colors: tailwindcssPaletteGenerator({
                colors: ['#FF0040', '#FFBB00'],
                names: ['red', 'yellow']
            })
        }
    },
    plugins: []
};
```

## 常见问题

### @bobthered/tailwindcss-palette-generator 是什么？

快速从基色或克色生成尾风色调色板\.

### 如何安装 @bobthered/tailwindcss-palette-generator？

在项目目录运行 npm install @bobthered/tailwindcss-palette-generator，或使用 pnpm add / yarn add / bun add。

### @bobthered/tailwindcss-palette-generator 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @bobthered/tailwindcss-palette-generator 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @bobthered/tailwindcss-palette-generator 可以商用吗？

@bobthered/tailwindcss-palette-generator 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @bobthered/tailwindcss-palette-generator 的下载量有多少？

根据 npm 官方下载统计，@bobthered/tailwindcss-palette-generator 在 2026/10/09 – 2026/11/07 这 30 天内被下载 4,835 次，日均约 161 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @bobthered/tailwindcss-palette-generator 还在维护吗？

最新版本 4\.0\.0 发布于 2024/10/13（2 年前）；至今共发布 12 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/08/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。