Tailwind CSS: Removing the Outline of a Text Input on Focus

Last updated on May 10, 2022 Pennywise Loading... Post a comment

On Chrome and some web browsers, when an input element or a textarea is focused, you’ll see a blue border around that element. In Tailwind CSS, you can remove it by using the focus modifier and the outline-0 utility class, like this:

<input class="focus:outline-0" type="text"/>

Example

Preview:

The code:

<body class="p-10">
    <form>
        <input class="w-96 px-3 py-2 border border-slate-600 rounded-xl focus:outline-0" type="text"
            placeholder="Title" />

        <div class="h-12"></div>

        <textarea class="w-96 h-48 px-3 py-2 bg-slate-200 rounded-xl focus:outline-0"
            placeholder="Description"></textarea>
    </form>
</body>

Further reading:

You can also check out our CSS category page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

You May Also Like