# @catppuccin/tailwindcss 中文文档

规范地址：https://npmcn.com/package/%40catppuccin/tailwindcss/

版本：1\.0\.0
npm 元数据更新时间：2025-07-26T00:48:24.353Z
中文译文更新时间：2026-11-09T04:51:33.628Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：179 kB，6 个文件
- TypeScript 类型：未声明
- Node.js 要求：\>=22\.0\.0
- 运行依赖：0 个
- 首次发布：2022-07-05T02:50:12.780Z
- 最新版本发布：2025-07-26T00:48:23.914Z
- 近 30 天下载量：18021（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：11（近 12 个月 0 个）

## 中文简介

QQ 为 TailwindCSS 提供贴吧主题

## 安装

```sh
npm install @catppuccin/tailwindcss
```

也可以使用：`pnpm add @catppuccin/tailwindcss`、`yarn add @catppuccin/tailwindcss`、`bun add @catppuccin/tailwindcss`

## README

### ![Logo](https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png)  
![](https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png) 产品 [尾风CSS](https://github.com/tailwindlabs/tailwindcss) ![](https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png)

[![](https://img.shields.io/github/stars/catppuccin/tailwindcss?colorA=363a4f&colorB=b7bdf8&style=for-the-badge)](https://github.com/catppuccin/tailwindcss/stargazers) [![](https://img.shields.io/github/issues/catppuccin/tailwindcss?colorA=363a4f&colorB=f5a97f&style=for-the-badge)](https://github.com/catppuccin/tailwindcss/issues) [![](https://img.shields.io/github/contributors/catppuccin/tailwindcss?colorA=363a4f&colorB=a6da95&style=for-the-badge)](https://github.com/catppuccin/tailwindcss/contributors)

## 使用量

1.  安装插件
    
    ```sh
    npm install -D @catppuccin/tailwindcss
    pnpm add -D @catppuccin/tailwindcss
    yarn add -D @catppuccin/tailwindcss
    ```
    
2.  导入与您相同的文件中的主题 `tailwindcss` 导入
    
    ```css
    @import "tailwindcss";
    
    /* 
     Choose between `mocha`, `frappe` or `macchiato` for dark mode, latte is included as the light mode flavour.
     We recommend using `mocha` for dark mode.
    */
    @import "@catppuccin/tailwindcss/mocha.css";
    ```
    
3.  用在你的标记!
    
    ```html
    <!-- All colours are prefixed with `ctp` -->
    <body class="bg-ctp-base">
      <h1 class="text-ctp-text">Welcome!</h1>
    
      <!-- Gradients are supported too -->
      <button
        className="bg-linear-50 from-ctp-red-400 to-ctp-mauve-400 text-ctp-base hover:from-ctp-red hover:to-ctp-mauve"
      >
        Click Here
      </button>
    
      <!-- 
       Flavour variants are predefined (`latte`, `frappe`, `macchiato`, and `mocha`)
       which allows you to force specific flavours and support custom theme switchers.
      -->
      <div className="latte">
        <p className="bg-ctp-base text-ctp-text">Hello from Latte!</p>
      </div>
    </body>
    ```
    

请检查date=中的日期值 (帮助) [(原始内容存档于2017-10-21). fiedwindcs.catppuccin.com](https://tailwindcss.catppuccin.com/)来啊!

## 谢谢

**当前维护者**

-   [柠檬](https://github.com/unseen-ninja)

**先前维护者**

-   [温通](https://github.com/nekowinston)

![](https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/footers/gray0_ctp_on_line.svg?sanitize=true)

版权: 2021年至今 [猫头鹰](https://github.com/catppuccin)

[![](https://img.shields.io/static/v1.svg?style=for-the-badge&label=License&message=MIT&logoColor=d9e0ee&colorA=363a4f&colorB=b7bdf8)](https://github.com/catppuccin/catppuccin/blob/main/LICENSE)

## 常见问题

### @catppuccin/tailwindcss 是什么？

QQ 为 TailwindCSS 提供贴吧主题

### 如何安装 @catppuccin/tailwindcss？

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

### @catppuccin/tailwindcss 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/catppuccin\_\_tailwindcss 是否存在。

### @catppuccin/tailwindcss 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @catppuccin/tailwindcss 可以商用吗？

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

### @catppuccin/tailwindcss 的下载量有多少？

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

### @catppuccin/tailwindcss 还在维护吗？

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