Blazor组件图标文本显示异常及Tailwind CSS内边距不生效求助

开发Blazor的InputWithIcon组件时，需实现图标居左、输入文本在图标右侧的布局，但使用Tailwind CSS时设置的内边距未生效，导致图标与输入内容重叠，实际效果与预期不符。

实际效果：

预期效果：

现有代码问题分析 #

1. 样式冲突：输入框同时定义了自定义CSS的padding-left:30px和Tailwind的pl-2，Tailwind的内边距值更小，导致输入内容与图标重叠。
2. 参数未复用：组件定义了IconClass参数，但Razor视图中硬写死图标类，无法动态切换图标。
3. 图标定位逻辑不完善：使用calc(50% - 0.5em)实现垂直居中兼容性差，且图标左间距与输入框内边距不匹配。
4. 额外属性未传递：AdditionalAttributes参数未绑定到输入框，无法传递placeholder、禁用状态等属性。

修复后的代码 #

InputWithIcon.razor

<div class="relative">
    <i class="@IconClass"></i>
    <input type="text" 
           id="@id" 
           @bind="Value" 
           class="border rounded pl-10 py-2"
           @attributes="AdditionalAttributes" />
</div>

<style>
    .relative i {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: #9CA3AF; /* 可选：设置图标默认灰色 */
    }
</style>

InputWithIcon.razor.cs

public partial class InputWithIcon
{
    [Parameter] 
    public string IconClass { get; set; } = "fa fa-envelope"; // 设置默认图标

    [Parameter] 
    public string Value{ get; set; }

    [Parameter]
    public string id { get; set; }

    [Parameter(CaptureUnmatchedValues = true)] 
    public Dictionary<string, object> AdditionalAttributes { get; set; } = new Dictionary<string, object>();
}

修复说明 #

• 消除样式冲突：移除自定义的.input-icon类，改用Tailwind内置的relative实现相对定位，输入框用pl-10（左内边距2.5rem）给图标预留足够空间，彻底避免内容重叠。
• 支持动态图标：将<i>的类绑定为@IconClass，使用组件时可自由传入Font Awesome类名，比如<InputWithIcon IconClass="fa fa-user" />。
• 优化垂直居中：用transform: translateY(-50%)替代原计算方式，兼容性更强，图标垂直居中更精准。
• 传递额外属性：通过@attributes="AdditionalAttributes"将组件接收的额外属性绑定到输入框，支持placeholder、disabled等常用属性。

使用示例 #

<InputWithIcon id="email-input" 
               Value="@Email" 
               IconClass="fa fa-envelope"
               placeholder="请输入邮箱地址" />

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