Включить наведение только сверху / снизу / слева / справа

Question

Пытаюсь создать вариант в конфигурации файла Tailwind. Я бы хотел что-то вроде hover:border-l-4 hover:border-green-400, поэтому класс, который включает границу слева (или только сверху / снизу / справа).

Итак, я создаю это внутри tailwind.config.js:

      module.exports = {
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: ['./src/**/*.html', './src/**/*.{js,ts,jsx,tsx}'],
  },
  darkMode: false, 
  theme: {
    extend: {
      colors: {
        ...
      },
    },
    borderLeft: (theme) => ({}),
    ...
  },
  variants: {
    extend: {
      borderLeft: ['hover', 'focus']
    },
  },
  plugins: [],
}

Не работает. я получил TypeError: variantsValue is not iterable.

На странице документации я не нашел ничего полезного.

Answer 1

Оформить заказ на попутный ветер .

        variants: {
    extend: {
      borderWidth: ['hover'],
    }
  }

Отсюда, hover:border-l-4 hover:border-green-400 заработает.