focus:-outline-offset-2 with focus:outline-red-600 not working properly

[frbuceta]

<input type="text" name="value" id="value" class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-red-600 sm:text-sm/6" />

Tailwindcss is not able to colour the negative offset. Can anyone help me?

[wongjn]

It seems to be coloring it fine from your screenshot, or am I missing something?

[frbuceta]

You see a blue background of the negative offset, not the orange colour. I don't know if I'm missing a property or if there really is something wrong.

[wongjn]

Perhaps you have some other CSS that could be responsible for the blue border? It doesn't seem to show in this Tailwind Play. It could perhaps be a browser default.