Creating a search input field having an internal icon, using Tailwind CSS

user_18049497 0
Viewed 92

I am trying to learn Tailwind CSS and generally working better with CSS. In this case, I am trying to make my search icon appear inside of my search input field.

I found some tutorials online but they mostly use plain CSS.

Is there any simple way to achieve this using Tailwind?

import React from "react";
import { FaSearch } from "react-icons/fa";

const SearchBar = () => {
  return (
<div>
   <input className="bg-slate-50 hover:bg-red-200 rounded-3xl h-12 w-56" />
   <FaSearch />
</div>

enter image description here

I also tried to wrap the input elment in a <div> and <form> tags, but none of those worked.

tailwind-css css
1 Answers

This should do it:

<div className='flex items-center'>
  <input className='bg-slate-50 hover:bg-red-200 rounded-3xl h-12 w-56' />
  <SearchIcon className='-ml-9' />
</div>

Docs:

user_18916770
Related