Блог

Я создаю простое приложение react с Tailwind css.

Пример 1: рабочий сценарий без tailwind:

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

Здесь, в этом примере, tailwind не включен, и это простое приложение react, в котором набор полей и легенда отображаются корректным образом вместе с рамкой, окруженной.

Случай 2: нерабочий сценарий с tailwind:

Как и в первом сценарии, я хотел бы добиться такого же пользовательского интерфейса, используя Tailwind CSS.

И то, что я пробовал, приведено ниже,

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>
  

Требование: Требование заключается в том, что набор полей должен работать точно так же, как в ссылке 1, когда мы включаем tailwind css.. Не знаю причину, по которой это не работает, пока мы добавляем tailwind css в проект. Пожалуйста, помогите мне добиться результата.

Вы можете использовать классы фреймворка

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

Это будет выглядеть примерно так:

CSS Tailwind включает сброс css. Если вы ее не используете, настройте свой конфиг.

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

смотрите документ Preflight — Tailwind CSS