Start a discussion
Back
ReplySubscribe
TailwindGo to solution

Override Tailwind outline for inputs and buttons

Hello all,

A simple one here, but I just can't seem to get it working. How can I globally set the focus outline colour for inputs and buttons?

Here's what I have in my tailwind.config.js file.

    theme: {
        extend: {
            ...
        },
    },
    
    plugins: [require("@tailwindcss/forms")],

None of these seem to work.

            outlineColor: {
                default: "#ff0000",
            },

            ringColor: {
                default: "#ff0000",
            },

            ringOffsetColor: {
                default: "#ff0000",
            },

For UX and accessibility. I do not want to disable the outline when focusing.

Thanks!

Haz
Haz
Moderator
0
1
298
Haz
Haz
Moderator
Solution

A bit overdue, but here's what I am doing to solve it. Maybe it helps someone who stumbles on this thread. Not tested in TW4.

app.css

@layer base {
    .toggle:focus,
    [type='radio']:focus,
    [type='checkbox']:focus,
    [type='text']:focus,
    [type='email']:focus,
    [type='url']:focus,
    [type='password']:focus,
    [type='number']:focus,
    [type='date']:focus,
    [type='datetime-local']:focus,
    [type='month']:focus,
    [type='search']:focus,
    [type='tel']:focus,
    [type='time']:focus,
    [type='week']:focus,
    [multiple]:focus,
    textarea:focus,
    select:focus,
    button:focus,
    a:focus {
        box-shadow: 0 0 0 1px rgb(251, 146, 60);
        border-color: transparent;
        outline: none;
    }
}
2
Reply