Recently, I decided to switch from using plain CSS to TailwindCSS for styling the navbar component that I obtained from the Bootstrap website. While TailwindCSS has helped me style most parts of the navbar successfully, I have encountered a challenge with styling the search bar within the component.
Currently, I am still using plain CSS to style the search bar in the navbar component. Here is the HTML code snippet:
<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>
As for the CSS code for styling the search bar:
#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;
}
I provided a link to show how the search bar looks when styled with plain CSS and how I envision it looking after styling with TailwindCSS.
After attempting to style the search bar using TailwindCSS, the outcome is not as expected. Here is the modified code:
<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>
The result can be viewed through the provided link which shows that the TailwindCSS styles are not being applied. I would appreciate any guidance on this issue. Thank you!