Formkit.config.js中定义的Tailwind CSS类未生效问题

你的问题核心是FormKit未读取到formkit.config.js中的配置——虽然按文档创建了配置文件，但没有在项目初始化时将该配置传递给FormKit插件。内联样式和main.js中定义有效，是因为那些配置直接传给了FormKit，而单独的config文件需要显式导入合并。

修复步骤 #

1. 修改main.js，导入并合并配置 #

更新main.js，导入你的formkit配置文件，并将其合并到defaultConfig中：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { plugin, defaultConfig } from '@formkit/vue'
import './style.css'
import router from './router'
import { fr } from '@formkit/i18n'
// 导入自定义FormKit配置（注意路径要和实际文件位置匹配）
import formKitCustomConfig from './formkit.config.js'

createApp(App)
.use(
  plugin, 
  defaultConfig({
    locales:{ fr },
    locale: 'fr',
    messages:{
      fr:{
        ui:{
          submit: 'envoyer'
        }
      }
    },
    // 合并配置中的classes规则
    ...formKitCustomConfig.config
  })
)
.use(router)
.mount('#app')

2. （可选）简化配置文件的导出结构 #

如果觉得嵌套的config层级繁琐，可以修改formkit.config.js直接导出配置对象：

// formkit.config.js
import { generateClasses } from '@formkit/themes'

// 去掉外层的config属性，直接导出classes配置
export default {
  classes: generateClasses({
    text: {
      label: 'text-blue-500',
      input:'text-pink-600 w-full my-2 p-2 align-middle'
    }
  })
}

对应main.js的合并逻辑可以简化为：

// main.js
// ...其他导入
import formKitCustomConfig from './formkit.config.js'

createApp(App)
.use(
  plugin, 
  defaultConfig({
    locales:{ fr },
    locale: 'fr',
    messages:{
      fr:{
        ui:{
          submit: 'envoyer'
        }
      }
    },
    // 直接合并整个配置对象
    ...formKitCustomConfig
  })
)
.use(router)
.mount('#app')

3. 确认路径正确性 #

确保formkit.config.js的导入路径准确：

• 若文件在项目根目录，路径为./formkit.config.js
• 若在src文件夹下，路径为./src/formkit.config.js

完成修改后重启Vite开发服务器，FormKit就会正确应用你在config文件中定义的Tailwind类。

内容的提问来源于stack exchange，提问作者thiebo