2 years ago

I have been recently working with some TailwindCSS Components, and while working on a navigation component, I ran into a problem wherein the items of flex items would not stretch to the full height of the flex. I have a div marked as flex and have items inside it which are vertically centered using items-center tailwind utility class. To demonstrate the height issue, I have applied background color to the first nav item.

For the Solution, let's change each nav item to be a flex and mark items-center to each of the item. With the above code, we now have the flex items height stretched to the parent div height.