Блог

я пытался использовать tailwind с nextjs.

Я не могу указать какую-либо другую высоту для моего элемента HomeIcon из heroicons, кроме h-5. если я попытаюсь присвоить ему любую другую высоту, он заполнит весь экран.

 <div >
   <HomeIcon className='w-5 h-9'/>
</div>
 

приведенный выше код занимает весь экран.

 <div >
   <HomeIcon className='w-5 h-5'/>
</div>
 

работает нормально

Если вы хотите присвоить элементу желаемое height значение, установите width для него то же значение, и оно должно работать. Конечно, context то, в которое вы вставляете значки, также очень важно. Кроме того, прочитайте о свойстве height в tailwindcss и heroicons У этих значков есть некоторые limitations , о которых вам нужно знать при их правильном использовании.

Попробуйте это:

 <HomeIcon className="h-20 w-20" />
 

Мой пример кода:

 import { HomeIcon } from "@heroicons/react/solid";

function icons() {
  return (
    <div className="flex items-center justify-center gap-10 h-screen">
      <div className="">
        <HomeIcon className="h-6 w-6" />
        <small>height 6</small>
      </div>
      <div className="">
        <HomeIcon className="h-10 w-10" />
        <small>height 10</small>
      </div>
      <div className="">
        <HomeIcon className="h-12 w-12" />
        <small>height 12</small>
      </div>
      <div className="">
        <HomeIcon className="h-14 w-14" />
        <small>height 14</small>
      </div>
      <div className="">
        <HomeIcon className="h-16 w-16" />
        <small>height 16</small>
      </div>
      <div className="">
        <HomeIcon className="h-20 w-20" />
        <small>height 20</small>
      </div>
    </div>
  );
}

export default icons;
 

Вывод:

Проверено: «@heroicons / react»: «^ 1.0.2», «@tailwindcss / line-clamp»: «^ 0.2.1», «next»: «11.0.1», «react»: «17.0.2»