TailwindCSS 不适用于 HTML 输入和按钮标记

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 代码不起作用，我不知道为什么是这样吗？如果有人可以指导我哪里出错了，那就太好了。任何帮助将不胜感激。谢谢！

Answer 1

搜索

当您编写大纲时，您无法访问边框，因为它们是相同的，因此您必须选择其中之一或编写自定义 css 代码...