How to create a 🔍️ search bar using tailwind css in next js 🚀

🍁️ Rapidly build modern websites without ever leaving your HTML.

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

🙋🏻‍♂️️ So here we go, creating search bar using tailwind css in nextjs project

I'm assuming that you have basic knowledge of tailwind css and nextjs. I know that you have knowledge that's why you are here.
So without wasting any time lets start creating search bar using tailwind css and I also add one more functionality in it, hope you like it. And one more thing if you are in hurry then go to the end of the blog and grab the whole code.

Happy Coding! 😃💻

🐾️ Step 1 :

Creating the basic search bar and adding a search icon and some tailwind utility classes.

<div className="items-center px-4 flex justify-center" >
            <div className="relative mr-3">
                <div className="absolute top-3 left-3 items-center" ref={clickPoint}>
                    <svg className="w-5 h-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
                </div>
                <input
                    type="text"
                    className="block p-2 pl-10 w-70 text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:pl-3"
                    placeholder="Search Here..."
                    onFocus={handleFocus}
                    onBlur={handleBlur}
                />
            </div>
</div>

🐾️ Step 2 :

This is step is super cool and in which after focusing on search bar the search icon vanish and after unfocusing its back to its position.

import { useRef } from "react";
    const clickPoint = useRef();
    const handleFocus = () => {
        clickPoint.current.style.display = "none";
    };

    const handleBlur = () => {
        clickPoint.current.style.display = "block";
    };

👀️ Demo :

Demo of the above code.

GIF

🎯️ Full Code :

Here is the full code which you can try by yourself too.

import { useRef } from "react";

const SearchBar = () => {

    const clickPoint = useRef();
    const handleFocus = () => {
        clickPoint.current.style.display = "none";
    };

    const handleBlur = () => {
        clickPoint.current.style.display = "block";
    };

    return (
        <div className="items-center px-4 flex justify-center" >
            <div className="relative mr-3">
                <div className="absolute top-3 left-3 items-center" ref={clickPoint}>
                    <svg className="w-5 h-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
                </div>
                <input
                    type="text"
                    className="block p-2 pl-10 w-70 text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:pl-3"
                    placeholder="Search Here..."
                    onFocus={handleFocus}
                    onBlur={handleBlur}
                />
            </div>
        </div>
    );
}

export default SearchBar

I hope, you guys liked this quick tutorial. If so, then please don't forget to drop a Like ❤️

And also, follow me 🤩, on Twitter🐦️.
You can also check my github profile where I created many awesome projects - Github👨‍💻️

Happy Coding! 😃💻

Comments

[ItsYuvraj]

where i will put "full code" ?
which file

[Atul Tripathi]

You can create a new file in component folder and then use it in your page file or you can simply paste this code in your page folder by just creating a new page.