使用 tailwindcss 后导致 Input 组件的clearIcon向下偏移问题

[luzilong2005]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

4.2.6

Environment

Windows 24h2 26100.2605, Chrome 131.0.6778.140, Vue 3.5.13

Reproduction link

https://github.com/luzilong2005/antd-vue-input-bug.git

Steps to reproduce

安装 tailwindcss postcss autoprefixer模块并初始化后

在项目的src文件夹下的App.vue文件里面添加如下代码:

<template>
  <div>
    <Form style="width: 340px;">
      <FormItem>
        <Input placeholder="输入" allow-clear>
          <template #prefix>
            Hello
          </template>
        </Input>
      </FormItem>
    </Form>
  </div>
</template>

<script setup lang="ts">
import { Form, FormItem, Input } from "ant-design-vue";
</script>

如果使用了自定义的clearIcon插槽，结果显示正确

<template>
  <div>
    <Form style="width: 340px">
      <FormItem>
        <Input placeholder="输入" allow-clear>
          <template #prefix> Hello </template>
          <template #clearIcon> Hi </template>
        </Input>
      </FormItem>
    </Form>
  </div>
</template>

<script setup lang="ts">
import { Form, FormItem, Input } from "ant-design-vue";
</script>

What is expected?

Input 的 clearIcon应该保持在水平线上

What is actually happening?

Input 的 clearIcon 向下偏移了一段距离

---

该项目使用 pnpm create vite 的 Customize with create-vue。根据antd文档提示使用了局部组件，并在main.ts文件里正确引入了 import "ant-design-vue/dist/reset.css"

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

[huanghuadong527]