Vuetify v-text-field组件显示效果与官方文档不一致问题求助

• 你项目中引入的@tailwindcss/forms插件会全局重置原生表单元素的默认样式，直接覆盖了Vuetify对v-text-field内部input元素的自定义样式，导致输入框的边框效果、label悬浮位置、内边距等表现和Vuetify官方示例不一致。

方案1：调整Tailwind Forms插件配置（推荐） #

打开项目根目录下的tailwind.config.js文件，修改表单插件的启用策略为类名模式，避免全局覆盖样式：

module.exports = {
  // 其余原有配置保持不变
  plugins: [
    require('@tailwindcss/forms')({
      strategy: 'class'
    })
  ]
}

修改后重启开发服务即可，后续如果需要使用Tailwind的表单样式，手动给对应元素加form-input等类名即可，不会再影响Vuetify组件样式。

方案2：移除Tailwind Forms插件 #

如果项目不需要使用Tailwind提供的表单样式，直接卸载该插件即可：

npm uninstall @tailwindcss/forms

卸载后重启开发服务即可生效。

方案3：强制覆盖冲突样式 #

如果不想修改Tailwind配置，可以在全局样式文件中添加如下规则，优先使用Vuetify的表单样式：

.v-text-field input {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}

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