Today we are gogin to create an expandable search bar using only Tailwind CSS.
An expandable search bar is a search bar that expands when the user clicks on it. It is often used to provide a quick and easy way for users to search for information. It is a great way to add a search functionality to your website or app.
Use cases:
Compact Design in Navigation Bars:
Mobile Applications:
Single-Page Applications (SPAs):
Header Sections:
Content-Heavy Sites:
Interactive and Dynamic Interfaces:
E-commerce Sites:
Minimalistic Design Philosophy:
Sidebar Integration:
User Preference and Interaction:
peer
: This is a utility class that allows you to style an element as if it were a peer element.cursor-pointer
: This is a utility class that sets the cursor of the element to pointer.relative
: This is a utility class that makes an element positioned relatively.z-10
: This is a utility class that sets the z-index of the element to 10.h-12
: This is a utility class that sets the height of the element to 12.w-32
: This is a utility class that sets the width of the element to 32.pl-12
: This is a utility class that sets the padding-left of the element to 12.focus:w-full
: This is a utility class that sets the width of the element to full when it is focused.focus:pl-32
: This is a utility class that sets the padding-left of the element to 32 when it is focused.focus:pr-4
: This is a utility class that sets the padding-right of the element to 4 when it is focused.<input class="peer cursor-pointer relative z-10 h-12 w-32 pl-12 focus:w-full focus:pl-32 focus:pr-4 "/>
The placeholder text is the text that appears in the input field when it is empty. On this case you will have to adapt the size from the input field according to the placeholder, so you show the whole placeholer text and icon.
absolute
: This is a utility class that makes an element positioned absolutely.inset-y-0
: This is a utility class that sets the top, right, bottom, and left properties to 0.my-auto
: This is a utility class that sets the margin-top, margin-right, margin-bottom, and margin-left properties to auto.h-6
: This is a utility class that sets the height of the element to 6.w-32
: This is a utility class that sets the width of the element to 32.px-3.5
: This is a utility class that sets the padding-left of the element to 3.5.<div class="absolute inset-y-0 my-auto h-6 w-32 px-3.5">
<div class="flex items-center gap-2 justify-center">
<!--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="peer cursor-pointer relative z-10 h-12 w-32 pl-12 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 gap-2 justify-center">
<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>
This is a simple expandable search bar that demonstrates how to use Tailwind CSS to create an expandable search bar with a predefined set of styles. It’s a great starting point for building more complex expandable search bars.
Hope you enjoyed this tutorial and have a great day!
/Michael Andreuzza
Get lifetime access to every theme available today for $199 $139 and own
them forever. Plus, new themes, lifetime updates, use on unlimited
projects and enjoy lifetime support.
— No subscription required!