表单字段集边框在 Tailwind 中不显示 [已附片段]

Question

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

案例1 ：无顺风的工作场景：

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

在此示例中，不包括顺风，它是一个简单的反应应用程序，其中字段集和图例以正确的方式显示，并带有边框。

情况 2：顺风时不工作的情况：

与第一个场景一样，我想使用 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 添加到项目中时它不起作用。请帮助我实现结果。

Answer 1

您可以使用框架的类

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

它看起来像这样：

Answer 2

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

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

请参阅文档预检 - Tailwind CSS