Flexbox Tailwind CSS Inline Block Not Working

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"><a href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> icons/facebook}}</a></li>
        {{/if}}
        {{#if @site.twitter}}
        <li class="px-2"><a href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> icons/twitter}}</a></li>
        {{/if}}
        <li class="px-2"><a href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/" title="RSS" target="_blank" rel="noopener">{{> "icons/rss"}}</a></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"><a href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> icons/facebook}}</a></li>
                {{/if}}
                {{#if @site.twitter}}
                <li class="px-2"><a href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> icons/twitter}}</a></li>
                {{/if}}
                <li class="px-2"><a href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/" title="RSS" target="_blank" rel="noopener">{{> "icons/rss"}}</a></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"><a href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> icons/facebook}}</a></li>
            {{/if}}
            {{#if @site.twitter}}
            <li class="px-2"><a href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> icons/twitter}}</a></li>
            {{/if}}
            <li class="px-2"><a href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/" title="RSS" target="_blank" rel="noopener">{{> "icons/rss"}}</a></li>
        </ul>
    </div>
</div>
</nav>