TailwindCSS 不适用于 HTML Input 和 Button 标签

Question

所以我从 Bootstrap 网站上选择了导航栏组件，最初我使用纯 CSS 来添加必要的样式。现在我正在从纯 CSS 迁移并使用 TailwindCSS 向该导航栏组件添加必要的样式。在 TailwindCSS 的帮助下，除了导航栏组件中的搜索栏外，我已经成功地为导航栏的大部分部分添加了样式。

目前，我正在使用纯 CSS 来设置导航栏组件中搜索栏的样式。

这是HTML代码：

<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>

这是CSS代码：

#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;
}

这里是现在的样子（使用纯 CSS 设置样式时），这就是我想要的样子：

现在我尝试使用 TailwindCSS 为上面的搜索栏设置样式。

这是相同的代码（添加了必要的 TailwindCSS 并删除了我之前使用的 CSS id 选择器）：

  <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>

我从上面的代码中得到的内容如下：

所以我从上图中得到的是，当我删除纯 CSS 并添加 TailwindCSS 来设置搜索栏样式时，没有应用任何样式，即 TailwindCSS 代码不起作用，我不知道为什么是不是这样。如果有人能指导我哪里出错了，那就太好了。任何帮助将不胜感激。谢谢！