在本指南中，我们将一起走过为您的表单和输入创建自定义 Tailwind 主题的过程。Tailwind 已经崭露头角，成为 CSS 实用类库的前沿，而 FormKit 则是考虑到其能力而编写的。让我们开始吧！
本指南假设您正在使用像 Vite、Nuxt 3 或 Vue CLI 这样的标准 Vue 3 构建工具，这将允许您导入 .vue 单文件组件。
如果您计划使用 Tailwind CSS 来设计您的表单样式，那么请确保您的项目没有导入与 FormKit 一起提供的基础 genesis 主题 — 否则您将得到奇怪的样式结果。
在代表组件的 .vue 文件的上下文中，可以使用 FormKit 提供的 section-key 类属性 或 classes 属性 创建 Tailwind 主题。
如果您的组件代表您的整个表单，并且您的项目只需要一个表单，那么这可能就是您所需要的全部。下面是一个示例，展示了如何使用 section-key 属性和 classes 属性将相同的 Tailwind 类应用到 FormKit 的 text 输入：
这是一种将 Tailwind 样式应用到您的 FormKit 表单的低门槛方式，但如果您有多个表单怎么办？在组件之间复制粘贴类列表并不理想，而且会随着时间的推移在您的项目中导致样式的无意识变化。
让我们探索一下如何将 Tailwind 类全局应用到我们项目中的 所有 FormKit 输入。
FormKit 提供了一个名为 @formkit/themes 的第一方包，其中包含了 Tailwind CSS 支持 — 这使得在您的项目中为 FormKit 创建一个 Tailwind CSS 主题变得容易。
该包使您能够按输入的 type 和 sectionKey 将您的主题作为 JavaScript 对象进行编写。此外，您还可以访问基于输入和表单状态的一些 Tailwind 变体，如 formkit-invalid: 和 formkit-disabled:，这些变体允许您动态地改变您的输入样式。
要开始，我们需要将该包添加到我们的项目中。
npm install @formkit/themes从那里我们需要做两件事：
@formkit/themes 中的 formKitTailwind 插件添加到我们项目的 tailwind.config.js 文件中。tailwind-theme.js）。@formkit/themes 中导入 generateClasses 辅助函数，并在我们的 FormKit 配置选项中使用它和我们的主题。// tailwind.config.js
const formKitTailwind = require('@formkit/themes/tailwindcss');
module.exports {
...
content: [
...
'./tailwind-theme.js',
],
plugins: [
formKitTailwind
]
...
}// tailwind-theme.js
export default {
// 我们的主题将在这里。
// ...
// text: {
// label: 'font-bold text-gray-300',
// ...
// }
// ...
}// app.js
import { createApp } from 'vue'
import App from './App.vue'
import { plugin, defaultConfig } from '@formkit/vue'
import { generateClasses } from '@formkit/themes'
import myTailwindTheme from './tailwind-theme.js'
import '../dist/index.css' // 您的 Tailwind 样式所在的位置
createApp(App)
.use(
plugin,
defaultConfig({
config: {
classes: generateClasses(myTailwindTheme),
},
})
)
.mount('#app')一旦这个设置完成，我们就可以开始编写我们的 Tailwind 主题了！
首先，让我们对 text 样式输入应用一些合理的类。这将覆盖大面积，因为我们可以轻松地将这些样式重用到其他类似文本的输入，如 email、password、date 等。
为了特别针对 text 输入，我们将在我们的主题对象中创建一个 text 键，然后根据需要对每个 sectionKey 应用类。
这是一个应用了 Tailwind 类的 text 输入：
@formkit/themes 中的 formKitTailwind 插件提供了一些你可以在类列表中使用的变体，以动态响应输入和表单状态。
如果你在嵌套情况下使用变体，变体可能会链接到其父级而不是自身。
为了解决这个问题，在外部部分添加 group/{modifier}，并使用与 formkit-invalid/{modifier}: 同样修饰符的变体。
目前提供的变体有：
formkit-disabled:formkit-invalid:formkit-checked:formkit-errors:formkit-complete:formkit-loading:formkit-submitted:formkit-multiple:formkit-prefix-iconformkit-suffix-icon你可以像使用内置的 Tailwind 变体（如 dark: 和 hover:）一样使用这些变体。
让我们为 formkit-invalid 和 formkit-disabled 添加一些变体到我们的文本输入：
现在我们开始烹饪了！要创建一个全面的主题，我们需要为我们项目中将使用的所有其他输入类型的 sectionKeys 定义类列表。
不过我们可以做一些改进。@formkit/themes 中的 generateClasses 辅助函数允许一个特殊的 global 键，它将应用于 所有 输入。这对于像 help 和 messages 这样的 sectionKeys 很有帮助，因为它们通常在一个项目的所有输入类型中都有相同的样式。
通过在你的主题对象中使用 global 和 family: 键，你可以将类列表应用到具有给定 sectionKey 的 所有 输入，无论是全局还是在输入家族内。这对于像标签或帮助文本这样的东西很有用，当你想在各种各样的输入中共享样式时。
让我们创建一个 "厨房水槽" 的输入类型，每个输入类型都有其定义的类列表应用。这是为了更好的可读性而独立出来的主题：
这是我们的 Tailwind 主题应用到所有可用的 FormKit 输入时的样子：
FormKit 输入带有自己的 decorator 图标，可以代替通常随复选框、单选框、选择输入等附带的浏览器默认样式。
如果你想在你的 Tailwind 主题中使用这些类型的图标，一定要从 @formkit/icons 中导入它们，并将它们包含在你的 FormKit 配置中。
就这样！我们整个项目中的所有FormKit输入都使用Tailwind实用程序类进行了样式设计。
如果我们需要在项目中覆盖任何特定的一次性操作，我们可以使用section-key class props或在本指南开头部分介绍的项目中给定的FormKit输入上的classes属性来实现。
在进行覆盖时，特别重要的是类列表的特殊$reset修饰符。当FormKit类系统遇到一个$reset类时，它将擦除给定部分的当前类列表，并且只收集在遇到$reset令牌之后出现的类名。在像Tailwind这样的系统中，这是非常有价值的，因为如果要偏离我们的主题，那么编写覆盖类或为每个全局配置的类单独禁用类将会很痛苦：
本指南已经介绍了如何创建一个覆盖FormKit中包含的所有输入类型的Tailwind主题，但是在你自己的项目中还可以做更多的事情。
以下是一些进一步利用上述指南的方法：
dark:修饰符添加暗模式支持。formkit-invalid:formkit-submitted:，当用户试图提交不完整的表单时，为无效字段添加额外的强调。希望这个指南能帮助你理解如何将类应用到FormKit输入，以及如何利用@formkit/themes包中的formKitTailwind插件在你的FormKit项目中使用Tailwind。如果你想深入了解，试着阅读关于FormKit的核心内部和FormKit schema的内容！