Граница не отображается при наведении в TailwindCSS

Question

Вот мой код:

      <button class="text-center hover:border-b-2 hover:border-black">Home</button>

Я использую TailwindCSS. Когда я удаляю hover: перед border-b-2он работает хорошо, с серой рамкой обычно и черной рамкой, появляющейся при наведении курсора. Но как только я добавлю hoverпрефикс, граница исчезает. Мой код правильный?

Answer 1

Per Tailwindcss по умолчанию варианты ссылок

Tailwind css по умолчанию не включает все варианты для всех утилит.

Howerver Tailwind css позволяет добавить дополнительный псевдокласс в tailwind.config.js

      // tailwind.config.js
variants: {
  extend: {
    borderStyle: ['responsive', 'hover'],
    borderWidth: ['responsive', 'hover'],
    },
},

Итак, эта конфигурация border- * будет активна.