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

Posted 2023-03-06

【中文标题】TailwindCSS 不适用于 HTML 输入和按钮标记

【英文标题】：TailwindCSS not working with HTML Input and Button tag

【发布时间】：2021-07-19 12:26:13

【问题描述】：

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

【问题讨论】：

是 Tailwind 样式没有应用在您的应用中的任何位置，还是只是搜索栏？你的tailwind.config.js 文件是什么样的？你确定你的项目中有you're including Tailwind CSS（在pages/_app中导入CSS）？

【参考方案1】：

搜索

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

【讨论】：

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。