Devcrea
common.loading

How to Build a Modern Search Bar with Tailwind CSS

Ekin Yalgin
Ekin Y.
Web Development
0
How to Build a Modern Search Bar with Tailwind CSS
Helpful
0
Not Helpful

A search bar is one of the most essential components in web development. Creating a sleek and functional search bar with Tailwind CSS can enhance both the design and user experience. In this Tailwind CSS tutorial, we will learn how to build a fully responsive search bar step by step.

By the end of this guide, you'll understand why Tailwind CSS is a powerful choice over traditional CSS for building UI components efficiently.

Why Use Tailwind CSS for a Search Bar?

In traditional HTML and CSS, developers have to write custom styles for every component, which can make large projects complex and difficult to maintain. However, Tailwind CSS simplifies this process with utility-first classes, allowing us to style directly within the HTML without writing additional CSS files.

Now, let’s start building our Tailwind CSS search bar!

Setting Up the HTML Structure: First, create a new HTML file and include the Tailwind CSS CDN in the <head> section:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Search Bar</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-600 flex items-center justify-center h-screen">
</body>
</html>

What This Code Does:

  • Includes Tailwind CSS using the CDN
  • Ensures the page is responsive on all devices
  • Centers the search bar using flex and justify-center

Adding the Input Field: Now, let’s add the search input field inside a div container:

<div class="relative w-60">
    <input type="text" placeholder="Search..." 
        class="w-full px-4 py-2 rounded-full focus:outline-none">
</div>

Explanation of Classes Used:

  • relative w-60 → Defines a fixed width for the search box
  • w-full → Ensures the input field stretches within its container
  • px-4 py-2 → Adds padding for better spacing
  • rounded-full → Creates rounded corners for a modern look
  • focus:outline-none → Removes the default blue outline on focus

Adding a Search Button: Next, we need a search button positioned inside the input field. Let's add it using Tailwind CSS utility classes:

<button class="absolute right-0 top-0 mt-1 mr-2 bg-orange-500 text-white p-2 rounded-full hover:bg-black">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" 
        stroke="currentColor" class="w-4 h-4">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
            d="M14 5l7 7m0 0l-7 7m7-7H3" />
    </svg>
</button>

What This Code Does:

  • Positions the search button to the right with absolute right-0 top-0
  • Uses bg-orange-500 for a bright orange button
  • Changes color on hover using hover:bg-black
  • Adds an SVG search icon instead of plain text

Placing the Button Inside the Search Bar: Now, let’s properly position the search button inside the search input field for a cleaner UI:

<div class="relative w-60">
    <input type="text" placeholder="Search..." 
        class="w-full px-4 py-2 rounded-full focus:outline-none pr-10">
    <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-orange-500 text-white p-2 rounded-full hover:bg-black">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" 
            stroke="currentColor" class="w-4 h-4">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                d="M14 5l7 7m0 0l-7 7m7-7H3" />
        </svg>
    </button>
</div>

Key Adjustments:

  • pr-10 → Adds right padding so text doesn’t overlap with the button
  • absolute right-2 top-1/2 transform -translate-y-1/2 → Centers the button vertically inside the input

Enhancing User Experience with Effects: To improve the search bar UX, let’s add:

  • Hover effects for better interaction
  • Soft shadows for a modern design
  • Smooth transitions for button animations
<div class="relative w-60">
    <input type="text" placeholder="Search..." 
        class="w-full px-4 py-2 rounded-full focus:outline-none pr-10 shadow-lg transition">
    <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-orange-500 text-white p-2 rounded-full hover:bg-black transition">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" 
            stroke="currentColor" class="w-4 h-4">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                d="M14 5l7 7m0 0l-7 7m7-7H3" />
        </svg>
    </button>
</div>

Added Improvements:

  • shadow-lg → Adds a soft shadow effect
  • transition → Enables smooth hover animations

In this Tailwind CSS tutorial, we built a fully responsive search bar step by step. We used Tailwind's utility classes to create a modern and user-friendly search input field with a built-in search button. You can now apply this Tailwind CSS project in real-world applications, from simple websites to complex dashboards.

tailwindcss

Share