表单域集边框未在Tailwind中显示[摘录]

问题描述

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

案例1 ：工作场景没有不利因素：

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

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

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

要求：要求是，当我们包含顺风CSS时，该字段集必须与链接1中的工作完全相同。不知道添加顺风时为何该字段集不起作用的原因CSS到项目。请帮助我达到目标。

解决方法

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

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

参见文档Preflight - Tailwind CSS

,

你可以使用框架的类

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

它看起来像这样：