svelte with tailwind showing different output in Firefox and Chrome

I was designing a Tags input field much like StackOverflow. I designed it using Sveltekit and Tailwindcss . But it was showing different outputs in Firefox and Chrome. I searched through the code using debugger tools. As a result, I was unable to find any solution.

I designed this :

Code of this :

<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>

This is how chrome is showing :

This is how Firefox is showing :

A small blue border is showing around the input field in Firefox. I couldn't find the reason behind it. How i show the exact same UI in Firefox ?