focus:shadow-none not working

[raulbarriga]

I used focus:shadow-none for an input html box so that when I click on it to type, it removes the blue outline surrounding it.

However, this tailwind css class doesn't work. It works only when I manually use my own css to do the same thing on removing the blue outline.

The value of this tailwind css is:

.focus\:shadow-none:focus {
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

This never uses box-shadow: none, which will actually removes the blue outline when typing in the input box.

I think you might need to update/change this tailwind css class to actually use a value of none instead of setting things to zeros.

[alex-krasikau]

Hey @raulbarriga,

Please let me know if I understand your case correctly: you don't have any shadows or rings set on an input in its regular state, but when you click, a blue outline appears (which is the default browser behavior).

If this is the case, then I believe outline-none should fix the issue - you can check it here: https://play.tailwindcss.com/M0bgjNxENU. If this doesn't help and you would like to use box-shadow: none, you can make use of the arbitrary values syntax: focus:[box-shadow:none].

In any case, I would like to caution you that focus is an important aspect of the user experience, and I would suggest you consider improving the focus styles according to your preferences rather than completely eliminating them.

Please let me know if this solves the issue or if you need any further assistance.

[raulbarriga]

focus:[box-shadow:none] did the trick! Thanks! You understood my use case well so thanks for that. Sometimes the outline: none won't do the trick, which is something I found from other devs on stackoverflow. Someone had suggested the use of box-shadow: none to resolve it, which I combined with focus: for when the user interacts with the input tag. Thanks for the accessibility point as well.

…

On Mon, Oct 16, 2023 at 11:13 PM alex-krasikau ***@***.***> wrote: Hey @raulbarriga <https://github.com/raulbarriga>, Please let me know if I understand your case correctly: you don't have any shadows or rings set on an input in its regular state, but when you click, a blue outline appears (which is the default browser behavior). If this is the case, then I believe outline-none should fix the issue - you can check it here: https://play.tailwindcss.com/M0bgjNxENU. If this doesn't help and you would like to use box-shadow: none, you can make use of the arbitrary values syntax: focus:[box-shadow:none]. In any case, I would like to caution you that focus is an important aspect of the user experience, and I would suggest you consider improving the focus styles according to your preferences rather than completely eliminating them. Please let me know if this solves the issue or if you need any further assistance. — Reply to this email directly, view it on GitHub <#12219 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEKQLMSIQHB333A4XBTKNXTX7YOXFAVCNFSM6AAAAAA6DHV3CWVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TGMBQGE4DC> . You are receiving this because you were mentioned.Message ID: ***@***.*** com>

[JorensM]

Applying focus:[box-shadow:none] worked for me as well, but I think it would make sense for shadow-none to remove the box shadow completely

[bbonczek]

If you came here because you tried to use shadow-none, and it did not help due to setting box-shadow to 0 0 #0000; use shadow-[none] instead.