TailwindCSS not working with HTML Input and Button tag

Question

So I picked up the navbar component from the Bootstrap website and initially I made use of plain CSS to add the necessary style. Now I'm migrating from plain CSS and making use of TailwindCSS to add the necessary style to that navbar component. With the help of TailwindCSS, I have managed to add style to most parts of the navbar except for the search bar that is there in the navbar component.

At the moment, I'm making use of plain CSS to style the search bar in the navbar component.

Here is the HTML code:

<form className="form-inline my-2 my-lg-0">
      <input className="form-control mr-sm-2" id={style["nav-bar-search-bar"]} type="search" placeholder="Search" aria-label="Search" />
      <button className="btn btn-outline-success my-2 my-sm-0" type="submit" id={style["nav-bar-search-button"]}>Search</button>
</form>

Here is the CSS code:

#nav-bar-search-bar{
    border: 1px solid black;
    border-radius: 1rem;
}

#nav-bar-search-bar:focus{
    width: 20vw;
}

#nav-bar-search-button{
    border: 1px solid black;
    border-radius: 1rem;
    color: black;
}

Here how it is looking at the moment (when styled with plain CSS) and that's how I want it to look:

Now I tried styling the above search bar using TailwindCSS.

Here is the code for the same (with the addition of necessary TailwindCSS and removal of CSS id selectors that I had in place previously):

  <form className="form-inline my-2 my-lg-0">
      <input className="form-control mr-sm-2 border border-solid border-black rounded-2xl focus:w-1/5" type="search" placeholder="Search" aria-label="Search" />
      <button className="btn btn-outline-success my-2 my-sm-0 border border-solid border-black rounded-2xl text-black" type="submit">Search</button>
  </form>

and what I'm getting from the above code is as follows:

So what I'm getting from the above picture is that when I'm removing the plain CSS and adding TailwindCSS to style the search bar, no styling is being applied i.e. TailwindCSS code is not working and I'm not sure why is that happening. It would be really great if someone could guide me as to where I'm going wrong. Any help would be highly appreciated. Thanks!

Answer 1

The problem you are facing is because you are using both bootstrap and tailwind. Some properties i.e the class names override , to avoid that use either bootstrap + css or just tailwindCss.

Using pure tailwindcss. The code is as below:

 <div className="bg-green-500 text-center">
  <form className="form-inline p-5 my-2 lg:my-0">
    <input
      className="form-control p-2 mr-2 border-black  border-solid border-2 rounded-2xl focus:outline-none placeholder:text-black "
      type="search"
      placeholder="Search"
      aria-label="Search"
    />
    <button className="border-black border-2 rounded-2xl py-2 px-4 ">
      Search
    </button>
  </form>
</div>

For more search based examples using tailwindCss use the following link

https://tailwind-elements.com/docs/standard/forms/search/