DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,547 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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
 
yuvrajrastogi7 profile image
Yuvraj-Rastogi

where i will put "full code" ?
which file

Collapse
 
atultrp profile image
Atul Tripathi Author

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.

What image format should you use in your next project? πŸ€”