Как создать контент псевдограницы с помощью Tailwind CSS ⇐ CSS

[Гость]

Итак, я пытаюсь создать верхнюю и нижнюю границу навигационного меню в Tailwind CSS, я пробовал использовать border-b-4 и border-t-4 с bg-indigo-500, но граница и фон не разделялись друг на друга. Интересно, могу ли я использовать его с помощью псевдоэлемента или есть ли лучший способ для этого? спасибо!

вот мой код:

'inline-flex items-center px-1 pt-1 border-b-4 border-t-4 border-indigo-400 text-sm шрифт-medium bg-indigo-500 Leading-5 text- серый-900 фокус: контур-нет фокус: граница-индиго-700 длительность перехода-150 легкость выхода' Я хочу, чтобы это выглядело так:





Но вместо этого я получил вот что: