SvelteKit+Tailwind标签输入框Firefox与Chrome样式不一致问题

问题背景 #

我正在开发一款类似StackOverflow效果的Tags标签输入字段，技术栈选用SvelteKit与TailwindCSS，开发完成后发现组件在Firefox和Chrome中渲染效果存在差异，逐行调试代码未找到问题成因。

预期效果 #

问题复现代码 #

<script lang="ts">
     let TagObj: { Input: string; Focus: boolean; List: string[]; Suggested: string[] } = {
        Input: '' as string,
        Focus: false as boolean,
        List: [] as string[],
        Suggested: [] as string[]
    };
    / TAGS
    function onKeyPressTags(e: { keyCode: any }) {
        switch (e.keyCode) {
            case 32:
                onKeyTag();
                break;
            case 13:
                onKeyTag();
                break;
        }
    }
    function onKeyTag() {
        if (TagObj.Input.trim() != ("" as String)) {
            TagObj.List = [...TagObj.List, TagObj.Input.trim()];
            TagObj.Input = '' as string;
        }
    }

</script>

<div class="mx-4 mt-3 h-fit w-[95%] rounded-lg border-2 border-[#24262b] bg-[#303338] p-2 text-lg font-medium text-[#98999e]  outline-0   {TagObj.Focus ? 'border-sky-500' : ''}  ">
    <ul class="flex flex-row flex-wrap gap-2">
        {#each TagObj.List as t}
        <li class="m-1 rounded-md bg-[#3d4951] px-2 py-1 text-[#9bc0da] hover:cursor-pointer hover:bg-slate-600 hover:text-teal-200">
            {t}
        </li>
        {/each}
        <input on:keypress={onKeyPressTags} maxlength=20 bind:value={TagObj.Input} on:focus={() => { TagObj.Focus = true;}} on:blur={() => { TagObj.Focus = false; }} type="text" class=" inline w-fit grow bg-inherit  border-0  outline-0  " />
    </ul>
</div>

实际渲染表现 #

• Chrome浏览器渲染效果：
  
• Firefox浏览器渲染效果：
  

Firefox中输入框周围会出现一圈额外的蓝色边框，无法定位异常样式来源，需要调整代码让组件在两个浏览器中UI效果完全一致。

Firefox下的额外蓝色边框是浏览器为输入框添加的原生聚焦默认样式，当前代码中给input设置的outline-0未覆盖Firefox专属的表单控件默认样式，按以下步骤修改即可：

• 给输入框元素追加Tailwind类名focus:outline-none和focus:ring-0，覆盖所有浏览器默认的聚焦轮廓、聚焦环效果
• 在全局样式文件中添加Firefox专属伪类重置规则，彻底移除输入框原生描边：

input::-moz-focus-inner {
  border: 0;
  outline: none;
}

补充说明：现有代码script块内的注释写法有误，单行注释需使用// TAGS格式，直接写/ TAGS会触发TypeScript编译报错。

内容的提问来源于stack exchange，提问作者sk shahriar ahmed raka