Create A Clean And Easy Search Bar With Tailwind CSS And NextJs
If your web app requires a search bar then this could be the post for you because thats exactly what we're going to be covering today. We're going to look at how you can create your own search bar that you can easily customise to fit your needs. Best of all, we're making it within React, which means we can turn it into its own reusable component. Feel free to follow along!
What We'll Be Building
Heres a preview of what we're going to be building, in both a light and dark theme. This search bar looks good for both light and dark themes without any modification which is ideal!
Dark Theme
Light Theme
Our Base Component
First we need to define our component with any properties it can potentially have which you can see below.
The Outer Div
Defining The Label
You may not want a label so we're going to conditionally render the label for the component. If you've never seen the && syntax before then you can use it to make your code easier to read!
The Input
This is the most complex part of the component. I've only highlighted the classes that we've not frequently used already. If you're unfamiliar with any classes used here then you can check out some of my other posts to see them in use.
Wrap Up!
Hopefully the breakdown of Tailwind classes used in the screenshots I've provided have helped you learn how to create your own search bar. I've used Carbon to create the pretty code extracts. If you've created anything different then post a comment below and show me! Alternatively you can tweet me at @FraserFewster I'd love to learn from you as well!
Comments
Post a Comment