表单字段集边框未在 Tailwind 中显示 [已附加片段]答案

【问题标题】：Form fieldset border not displaying in Tailwind [ Snippet Attached ]表单字段集边框未在 Tailwind 中显示 [已附加片段]
【发布时间】：2020-12-02 23:53:29
【问题描述】：

我正在用Tailwind css 制作一个简单的反应应用程序。

案例 1：工作场景没有顺风：

https://codesandbox.io/s/bold-agnesi-y70ue

在这个例子中，顺风不包括在内，它是一个简单的反应应用程序，其中字段集和图例以正确的方式显示以及被包围的边框。

案例 2： 不工作的场景 with 顺风：

与第一个场景一样，我想使用 Tailwind CSS 实现相同类型的 UI。

下面给出了我尝试过的东西，

https://codesandbox.io/s/tailwind-css-and-react-forked-tkolh

问题：根据给定的第二个链接（使用 Tailwind css），字段集周围没有显示边框，而是显示了表单字段和图例文本。

简单代码：

  <form>
    <fieldset>
      <legend>Personalia:</legend>
      <label for="fname">First name:</label>
      <input type="text" id="fname" name="fname" />
      <br />
      <br />
      <label for="lname">Last name:</label>
      <input type="text" id="lname" name="lname" />
      <br />
      <br />
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" />
      <br />
      <br />
      <label for="birthday">Birthday:</label>
      <input type="date" id="birthday" name="birthday" />
      <br />
      <br />
      <input type="submit" value="Submit" />
    </fieldset>
  </form>

要求：要求是当我们包含tailwind css时，字段集需要与链接1中的字段集完全相同。不知道添加tailwind时它不起作用的原因项目的CSS。请帮助我实现结果。

【问题讨论】：

标签： html css reactjs tailwind-css fieldset

【解决方案1】：

你可以使用框架的类

<fieldset class="border border-solid border-gray-300 p-3">
    <legend class="text-sm">Specify products</legend>
    ...
</fieldset>

它看起来像这样：

【讨论】：

【解决方案2】：

Tailwind CSS 包括重置 CSS。如果您不使用它，请设置您的配置。

  module.exports = {
    corePlugins: {
      preflight: false,
    }
  }

见文档Preflight - Tailwind CSS

【讨论】：

我已在文件postcss.config.js 中添加了配置，但在这里不起作用：codesandbox.io/s/tailwind-css-and-react-forked-vd49w
添加tailwind.js