Sling Academy
Home/Tailwind CSS/Tailwind CSS: Expand a Text Input on Focus (without Javascript)

Tailwind CSS: Expand a Text Input on Focus (without Javascript)

Last updated: December 09, 2023

The example below shows you how to create an animated text field that can expand its width on focus (and shrink when losing focus). We’ll achieve this thing with only Tailwind CSS. No Javascript code is required.

Preview:

The code:

<body>
    <div class="w-screen h-screen bg-indigo-700 p-20">
        <h1 class="text-2xl text-white font-light mb-10">Animated Search Field Example</h1>
        <form>
            <input type="text" name="search" placeholder="Search slingacademy.com" class="bg-white px-5 py-3 text-gray-800 w-64 border-0 rounded-full 
            focus:outline-0 focus:w-full duration-500" />
        </form>
    </div>
</body>

Code explained:

  • In the beginning, the width of the input is set to w-64. When it gets focused, the width expands to w-full (the width of the parent). We styled the search field on the focus state by using the focus modifier.
  • To make the change smooth and not sudden, we added the duration-500 utility class.

Next Article: Tailwind CSS: Create a Floating Action Button (FAB)

Previous Article: Tailwind CSS: How to Create a Stepper

Series: Styling Form Elements with Tailwind CSS

Tailwind CSS

Related Articles

You May Also Like

  • How to Create Striped Tables with Tailwind CSS
  • Tailwind CSS: Creating Shimmer Loading Placeholder (Skeleton)
  • Tailwind CSS: How to Create Parallax Scrolling Effect
  • How to Style Lists in Tailwind CSS
  • Text Underline in Tailwind CSS
  • How to Change Mouse Cursor in Tailwind CSS
  • Form Validation with Tailwind CSS (without Javascript)
  • first-of-type and last-of-type in Tailwind CSS
  • Tailwind CSS: Create a User Card with Circle Avatar
  • Tailwind CSS: How to Create Columns with the Same Height
  • How to Style Placeholder Text with Tailwind CSS
  • Tailwind CSS: Make a Div 100% Height & Width of the Viewport
  • Using :not() selector in Tailwind CSS
  • Tailwind CSS: How to Create a Stepper
  • Using ::before and ::after in Tailwind CSS
  • Tailwind CSS: How to Create a Vertical Divider Line
  • How to Create Pill Buttons with Tailwind CSS
  • Tailwind CSS: How to Disable Text Selection
  • Tailwind CSS: How to Disable Resizing of Textarea