An Interest In:
Web News this Week
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
Some of Our Sources
- Engadget
- Mashable
- Smashing Apps
- You The Designer
- Fuel Your Creativity
- Naldz Graphics
- Specky Boy
- Codrops
- Android Headlines
- Dev To
Help Webnuz
Referal links:
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.
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 SearchBarI 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!
Original Link: https://dev.to/atultrp/how-to-create-a-search-bar-using-tailwind-css-in-next-js-1oh9
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To