DEV Community

Cover image for How to create a ๐Ÿ”๏ธ search bar using tailwind css in next js ๐Ÿš€
Atul Tripathi
Atul Tripathi

Posted on

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>


Enter fullscreen mode Exit fullscreen mode

๐Ÿพ๏ธ 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";
    };


Enter fullscreen mode Exit fullscreen mode

๐Ÿ‘€๏ธ Demo :

Demo of the above code.
Image description

๐ŸŽฏ๏ธ 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


Enter fullscreen mode Exit fullscreen mode

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! ๐Ÿ˜ƒ๐Ÿ’ป

Top comments (2)

Collapse
 
itsyuvraj profile image
ItsYuvraj

where i will put "full code" ?
which file

Collapse
 
atultrp profile image
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.