TailwindCSS не работает с вводом HTML и тегом кнопки

#html #css #bootstrap-4 #next.js #tailwind-css

Вопрос:

Поэтому я взял компонент navbar с веб-сайта начальной загрузки и изначально использовал простой CSS, чтобы добавить необходимый стиль. Теперь я перехожу с простого CSS и использую TailwindCSS, чтобы добавить необходимый стиль в этот компонент навигационной панели. С помощью TailwindCSS мне удалось добавить стиль в большинство частей навигационной панели, за исключением строки поиска, которая находится в компоненте navbar.

В данный момент я использую простой CSS для оформления строки поиска в компоненте navbar.

Вот 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, которые у меня были ранее):

   <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 не работает, и я не уверен, почему это происходит. Было бы действительно здорово, если бы кто-нибудь мог подсказать мне, где я ошибаюсь. Любая помощь будет высоко оценена. Спасибо!

1. Стиль попутного ветра нигде не применяется в вашем приложении или это просто строка поиска? Как выглядит ваше tailwind.config.js досье? Вы уверены, что включаете CSS Tailwind в свой проект (импортируете CSS pages/_app )?

Ответ №1:

Поиск

когда вы пишете контур, вы не можете получить доступ к границе, потому что оба они одинаковы, поэтому вам нужно выбрать один из них или написать пользовательский css-код…