# @formkit/tailwindcss 中文文档

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

版本：2\.5\.0
npm 元数据更新时间：2026-11-08T13:54:53.366Z
中文译文更新时间：2026-11-15T09:08:54.572Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：17.5 kB，11 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：tailwindcss ^3\.0\.0
- 首次发布：2022-03-07T19:31:42.304Z
- 最新版本发布：2026-11-08T13:54:52.979Z
- 近 30 天下载量：10969（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：482（近 12 个月 30 个）

## 中文简介

用于 Tailwind 的 FormKit 插件, 提供基于输入状态的自定义变体

## 安装

```sh
npm install @formkit/tailwindcss
```

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

## README

[![FormKit Logo](https://cdn.formk.it/brand-assets/formkit-logo.png)](https://www.formkit.com/)

# @ formkit/ 尾风

> **折旧**:这个包裹被贬值. 使用 `@formkit/themes/tailwindcss` 相反,它提供了同样的功能,并增加了一些功能,例如: `checked`, (中文(简体) ), `prefix-icon`,以及 `suffix-icon` 变相.

此套件包含工具来协助为FormKit建立一个全面的Tailwind主题.

## 安装

```bash
npm install @formkit/tailwindcss
```

```js
// tailwind.config.js
module.exports {
  ...
  plugins: [
    require('@formkit/tailwindcss')
  ]
  ...
}
```

```js
// app.js (or your main entry file)
import { createApp } from 'vue'
import App from './App.vue'
import { plugin, defaultConfig } from '@formkit/vue'
import { generateClasses } from '@formkit/tailwindcss'
import './index.css' // wherever your Tailwind styles exist

createApp(App)
  .use(
    plugin,
    defaultConfig({
      config: {
        classes: generateClasses({
          // Your theme will go here.
          // ...
          // text: {
          //   label: 'font-bold text-gray-300 formkit-invalid:text-red-500',
          //   ...
          // }
          // ...
        }),
      },
    })
  )
  .mount('#app')
```

## 备选案文

这个 `@formkit/tailwindcss` 软件包提供了您可在类列表中用于动态响应输入和窗体状态的多个变体.

目前提供的变体是:

-   `formkit-disabled:`
-   `formkit-invalid:`
-   `formkit-errors:`
-   `formkit-complete:`
-   `formkit-loading:`
-   `formkit-submitted:`
-   `formkit-multiple:`
-   `formkit-action:`
-   `formkit-message-validation:`
-   `formkit-message-error:`

## 指南

用于为 FormKit 创建完整的 Tailwind 主题 [读取指南](https://formkit.com/guides/create-a-tailwind-theme) 在官方FormKit.com的docs上.

## 常见问题

### @formkit/tailwindcss 是什么？

用于 Tailwind 的 FormKit 插件, 提供基于输入状态的自定义变体

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

在项目目录运行 npm install @formkit/tailwindcss，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：tailwindcss（^3\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

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

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

### @formkit/tailwindcss 支持 ESM 还是 CommonJS？

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

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

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

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

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

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

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