@ formkit/ 尾风

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

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

安装

npm install @formkit/tailwindcss

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

// 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 主题 读取指南 在官方FormKit.com的docs上.