How to create an animated expanding search bar with Tailwind CSS

Today we are going to create an expandable search bar using only Tailwind CSS. No JavaScript: the input simply grows when it receives focus.

What is an expandable search bar?

An expandable search bar stays small and unobtrusive until the user clicks into it, then widens to a comfortable typing size. It gives you a full search input without permanently spending the space one would take.

Use cases

• Navigation bars: keep the header clean and let search expand only when someone actually needs it.
• Mobile interfaces: screen space is scarce, so a collapsed icon-sized input earns its keep.
• Dashboards and SPAs: search stays reachable without adding noise to a data-dense layout.
• Content-heavy sites: docs, blogs and forums where search matters but shouldn’t dominate the UI.

Let’s get started with the markup

The input field

• peer: marks the input so sibling elements can react to its state with peer-* variants.
• cursor-pointer: shows a pointer cursor while the input is collapsed.
• relative z-10: keeps the input above the placeholder layer.
• h-12: the input’s height.
• w-32: the collapsed width.
• pl-12: leaves room for the icon on the left.
• focus:w-full: expands the input to the full container width on focus.
• focus:pl-32 and focus:pr-4: adjust the padding while expanded so the text clears the placeholder area.

<input
  class="relative z-10 w-32 h-12 pl-12 cursor-pointer peer  focus:w-full focus:pl-32 focus:pr-4"
/>

The placeholder text

The placeholder layer holds the icon and the word “Search”. In this case you will have to adapt the size of the input field according to the placeholder, so the whole placeholder text and icon stay visible.

• absolute inset-y-0 my-auto: vertically centers the layer over the input.
• h-6 w-32: matches the collapsed input’s footprint.
• px-3.5: horizontal padding so the icon doesn’t touch the edge.

<div class="absolute inset-y-0 my-auto h-6 w-32 px-3.5">
  <div class="flex items-center justify-center gap-2">
    <!--Icon goes here -->
    <span>Search</span>
  </div>
</div>

The full markup Classes and visual styles are not included in the code below for brevity.

<form>
  <input
    class="relative z-10 w-32 h-12 pl-12 cursor-pointer peer  focus:w-full focus:pl-32 focus:pr-4"
  />
  <div class="absolute inset-y-0 my-auto h-6 w-32 px-3.5">
    <div class="flex items-center justify-center gap-2">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-4"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="icon icon-tabler icons-tabler-outline icon-tabler-search"
      >
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
        <path d="M21 21l-6 -6"></path>
      </svg>
      <span>Search</span>
    </div>
  </div>
</form>

Conclusion

This is a simple expandable search bar built entirely with Tailwind’s peer, focus: and transition utilities. It’s a great starting point for building more complex versions, like one that also submits on enter or filters results as you type.

Hope you enjoyed this tutorial and have a great day!