CODEWITHSUNDEEP
htmlcssreactjssearchtailwind-css
S.M
S.M

Reputation: 131

Tailwind CSS - Can't center search bar inside a div

I want to center the search bar inside the parent div but it's not working. I tried using flex and justify-center on the parent div but not only it doesn't center, it also shrinks my search bar's div. I think it's because it is not allowed to have the classes flex nested inside each other, so I tried text-center but that also didn't work.

Some links I looked into:

  1. https://tailwindcss.com/docs/justify-content
  2. https://tailwindcss.com/docs/text-align

Code:

<div>
   <div className="flex items-center max-w-md shadow rounded border-0 p-3">
       <input type="search" className="flex-grow py-2" placeholder="Search by name..." />
       <i className="fas fa-search flex-grow-0 py-2 px-2" />
   </div>
</div>

Upvotes: 1

Views: 1947

Answers (1)

Kirk Larkin
Kirk Larkin

Reputation: 93053

The max-w-md class limits the width of the div to which it's applied, but it doesn't centre the div itself. To do that, add the mx-auto class:

<div className="flex items-center max-w-md mx-auto shadow rounded border-0 p-3">

https://play.tailwindcss.com/H3C7MWgUeC

Upvotes: 1

Related Questions