Flexbox Tailwind CSS Inline Block Not Working - flexbox

Question

I am using Tailwind CSS and trying to create a navbar that displays my social-page links as an inline-block for all device sizes and justify-around each item on a mobile device, but it is ending up as a block item. I applied flex to the link container, added justify-around and then inline-block to the ul, but it isn't recognizing the inline-block. Is this due to the nested structure of the flex objects I'm using?
Here is a visual example:
inline-block expected
expected outcome on mobile
Here is the code I am referring to:
{{!-- Container - Social Pages --}}
<div class="flex flex-row md:items-center justify-around border-solid border-4 border-purple-600">
<ul class="inline-block border-solid border-4 border-teal-600">
{{#if #site.facebook}}
<li class="px-2">{{> icons/facebook}}</li>
{{/if}}
{{#if #site.twitter}}
<li class="px-2">{{> icons/twitter}}</li>
{{/if}}
<li class="px-2">{{> "icons/rss"}}</li>
</ul>
</div>
Here is the full code:
{{!-- Navigation Container - Logo, Links, Mobile Menu --}}
<nav class="lg:flex lg:flex-wrap lg:items-center lg:justify-between border-solid border-4 border-blue-600">
{{!-- Container - Logo and Mobile Menu --}}
<div class="flex justify-between border-solid border-2 border-red-500">
{{!-- Logo --}}
<div class="border-solid border-4 border-gray-400">
<a class="#" href="{{#site.url}}">
{{#if #site.logo}}
<img src="{{#site.logo}}" alt="{{#site.title}}" class="w-50 h-50" />
{{else}}
{{#site.title}}
{{/if}}
</a>
</div>
{{!-- Mobile Menu Button --}}
<div class="flex items-center border-solid border-4 border-green-600 lg:hidden">
<button class="mobile-menu px-3 py-2 border rounded text-red-200 border-blue-400">
<p>Menu</p>
</button>
</div>
</div>
{{!-- Container - Links and Social Pages --}}
<div class="md:flex md:items-center nav-links border-solid border-4 border-black-400">
{{!-- Container - Links --}}
<div class="md:inline-block border-solid border-4 border-yellow-600">
{{navigation}}
</div>
{{!-- Container - Social Pages --}}
<div class="flex flex-row md:items-center justify-around border-solid border-4 border-purple-600">
<ul class="inline-block border-solid border-4 border-teal-600">
{{#if #site.facebook}}
<li class="px-2">{{> icons/facebook}}</li>
{{/if}}
{{#if #site.twitter}}
<li class="px-2">{{> icons/twitter}}</li>
{{/if}}
<li class="px-2">{{> "icons/rss"}}</li>
</ul>
</div>
</div>
</nav>

Answer 1

Why not just keep it .flex and add .justify-between
.flex.w-full.justify-between should do the job
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
{{!-- Navigation Container - Logo, Links, Mobile Menu --}}
<nav class="lg:flex lg:flex-wrap lg:items-center lg:justify-between border-solid border-4 border-blue-600">
{{!-- Container - Logo and Mobile Menu --}}
<div class="flex justify-between border-solid border-2 border-red-500">
{{!-- Logo --}}
<div class="border-solid border-4 border-gray-400">
<a class="#" href="{{#site.url}}">
{{#if #site.logo}}
<img src="{{#site.logo}}" alt="{{#site.title}}" class="w-50 h-50" />
{{else}}
{{#site.title}}
{{/if}}
</a>
</div>
{{!-- Mobile Menu Button --}}
<div class="flex items-center border-solid border-4 border-green-600 lg:hidden">
<button class="mobile-menu px-3 py-2 border rounded text-red-200 border-blue-400">
<p>Menu</p>
</button>
</div>
</div>
{{!-- Container - Links and Social Pages --}}
<div class="md:flex md:items-center nav-links border-solid border-4 border-black-400">
{{!-- Container - Links --}}
<div class="md:inline-block border-solid border-4 border-yellow-600">
{{navigation}}
</div>
{{!-- Container - Social Pages --}}
<div class="flex flex-row md:items-center justify-around border-solid border-4 border-purple-600">
<ul class="flex w-full justify-between border-solid border-4 border-teal-600">
{{#if #site.facebook}}
<li class="px-2">{{> icons/facebook}}</li>
{{/if}}
{{#if #site.twitter}}
<li class="px-2">{{> icons/twitter}}</li>
{{/if}}
<li class="px-2">{{> "icons/rss"}}</li>
</ul>
</div>
</div>
</nav>