主题定制
使用 Web UI
开始使用 FormKit Themes（适用于 Tailwind）的最简单方法是直接访问 https://themes.formkit.com，自定义您选择的主题，然后选择 Download theme 来获取在项目根目录中运行的特定命令。
使用 CLI
另外，您可以使用 FormKit 命令行界面（CLI）为您的项目生成主题。要开始，请在与您的 formkit.config.{ts|js} 文件相同的目录中运行以下命令：
npx formkit theme
您将被引导选择一个现有主题作为项目的起点。此命令将在项目的根目录中创建一个 formkit.theme.{ts|js} 文件。要完成设置，您需要在 formkit.config.{ts|js} 中使用此主题文件中的 rootClasses：
// formkit.config.ts
import { fr } from '@formkit/i18n'
import { defaultConfig } from '@formkit/vue'
import { rootClasses } from './formkit.theme'
export default defaultConfig({
locales: { fr },
locale: 'fr',
config: {
rootClasses,
},
})
最后，您需要将 formkit.theme.{ts|js} 文件添加到 Tailwind 配置文件的 content 属性中。这将确保主题的样式包含在项目的 CSS 中：
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app.vue",
"./formkit.theme.ts" // <-- 添加您的主题文件
],
darkMode: 'class',
theme: {
extend: {},
},
plugins: [],
}
如果您再次运行命令，您将被带到 https://themes.formkit.com，在那里您可以自定义所选主题。
# 在项目根目录中有现有的 formkit.theme 文件
> npx formkit theme
? 发现本地主题文件 <themeName>，编辑这个主题？ › (Y/n)
添加图标
默认情况下，FormKit 需要的图标会在请求时从 CDN 加载。如果你更愿意直接在你的包中包含图标以提高性能，避免任何图标突然出现的情况，或者解决可能的服务器端渲染（SSR）问题，那么从 @formkit/icons 导入 genesisIcons 集合，并将它们展开到你的 FormKit 配置的 icons 属性中。
npm install @formkit/icons
import { genesisIcons } from '@formkit/icons'
...
const config = defaultConfig({
plugins: [proPlugin],
icons: {
...genesisIcons
}
})
...
进一步定制
一旦你在项目中有了一个主题，你可以通过遵循 FormKit 文档中的样式部分来进一步定制它。