Navbar link margin classes seem repetitive in Tailwind CSS, is there a better way?

29
September 11, 2019, at 09:30 AM

Having to add margin classes to each LI seems REALLY repetitive on a menu that is not being dynamically generated. This feels dirty like using style="" attributes...

Surely there must be a better way?

Not a huge deal on a small menu, but the final menu will have many levels of submenu.

I wonder if I should just write a rule in my stylesheet to add margins on my menu items?

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> 
 
<nav class="p-2 bg-indigo-900 text-white"> 
    <ul class="flex flex-row"> 
        <li class="mr-1"> 
            <a href="#">Home</a> 
        </li> 
        <li class="ml-1 mr-1"> 
            <a href="#">About</a> 
        </li> 
        <li class="ml-1 mr-1"> 
            <a href="#">Services</a> 
        </li> 
        <li class="ml-1 mr-1"> 
            <a href="#">History</a> 
        </li> 
        <li class="ml-1"> 
            <a href="#">Contact</a> 
        </li> 
    </ul> 
</nav>

Answer 1

I am not familiar with tailwind-css but you can make use of the :last-child and :first-child selectors.

nav ul li { 
  margin-left: 10px; 
  margin-right: 10px; 
} 
 
nav ul li:first-child { 
  margin-left: 0px; 
} 
 
nav ul li:last-child { 
  margin-right: 0px; 
}
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> 
 
<nav class="p-2 bg-indigo-900 text-white"> 
  <ul class="flex flex-row"> 
    <li class=""> 
      <a href="#">Home</a> 
    </li> 
    <li class=""> 
      <a href="#">About</a> 
    </li> 
    <li class=""> 
      <a href="#">Services</a> 
    </li> 
    <li class=""> 
      <a href="#">History</a> 
    </li> 
    <li class=""> 
      <a href="#">Contact</a> 
    </li> 
  </ul> 
</nav>

Answer 2

I'm going to mark the answer above correct since I provided no context about this being a Laravel project. What I have settled on is creating a partial for my nav, and then I pass it an array of labels and urls

// snippet of layouts/app.blade.php
@include('layouts._nav', ['links' => [
    [ 'label' => 'Main feed', 'url' => '/posts' ],
    [ 'label' => 'Announcements', 'url' => '/announcements' ],
    [ 'label' => 'Who to follow', 'url' => '/who-to-follow' ],
    [ 'label' => 'Profile', 'url' => '/profiles' ]
]])
// layouts/_nav.blade.php
<nav class="p-2 bg-indigo-900 text-white">
    <ul class="flex flex-row">
        @foreach($links as $link)
            @php
                if($loop->iteration === 1)
                    $class = 'mr-1';
                elseif($loop->iteration === $loop->count)
                    $class = 'ml-1';
                else
                    $class = 'ml-1 mr-1';
            @endphp
            <li class="{{ $class }}">
                <a href="{{ $link['url'] }}">{{ $link['label'] }}</a>
            </li>
        @endforeach
    </ul>
</nav>

Output HTML:


<nav>
    <ul class="flex flex-row">
        <li class="mr-1">
            <a href="/posts">Main feed</a>
        </li>
        <li class="ml-1 mr-1">
            <a href="/announcements">Announcements</a>
        </li>
        <li class="ml-1 mr-1">
            <a href="/who-to-follow">Who to follow</a>
        </li>
        <li class="ml-1">
            <a href="/profiles">Profile</a>
        </li>
    </ul>
</nav>
READ ALSO
What is this &ldquo;normalize.less&rdquo; I see in F12 Developer Console?

What is this “normalize.less” I see in F12 Developer Console?

I am having trouble finding information on this "normalizeless" thing I'm seeing in the Chrome 76 developer console

42
SQL ANY &amp; ALL Operators [closed]

SQL ANY & ALL Operators [closed]

I have started using sql and have heard much about the ANY and ALL operatorsCan somebody explain to me the kind of queries they are used in and how they work?

32
How to fix &#39;rest_invalid_param&#39; when tried to post a comment using wordpress API

How to fix 'rest_invalid_param' when tried to post a comment using wordpress API

I'm trying to post a comment to a blog post using cURL, but ended up with 'rest_invalid_param' error

30
Laravel Eloquent rather complex relationship

Laravel Eloquent rather complex relationship

I have two tables, users and jobsA user owns a job:

15