Creating A Navigation Bar With Tailwind

In this tutorial we're going to investigate using the new Tailwind CSS library and look into build a navigation bar with tailwinds. If you haven't heard or used Tailwinds have a look at a previous article about utility libraries. Using A CSS Utility Library The idea is that we have all the utility CSS classes we need and we can just add these classes to the HTML.

#Starting HTML

Below is the starting HTML we're going to work with. As you can see we have a header tag for the entire navigation area. An area for the H1 header text, main links in the middle of the navigation, then login links on the right of the navigation.

<header>
    <div>
        <div>
            <a href="{{ route('blog.index') }}"><h1>Paulund</h1></a>
        </div>

        <nav>
            <a href="{{ route('blog.tutorials.index') }}">Tutorials</a>
            <a href="{{ route('blog.resources.index') }}">Resources</a>
            <a href="{{ route('blog.about') }}">About</a>
            <a href="{{ route('blog.contact') }}">Contact</a>
        </nav>

        <div>
            <a href="{{ route('register') }}">Sign Up</a>
            <a href="{{ route('login') }}">Login</a>
        </div>
    </div>
</header>

#Full Width Navigation Bar

First we need to make the navigation bar full width we do this by using the w-screen class or w-full class. To add a padding to the bar we can use p-3. Add a background of white bg-white. Add a shadow to the navigation box shadow. Make the bar position fixed by using fixed

<header class="w-screen p-3 bg-white shadow fixed">

#Centered Container

We want the navigation to live inside a centered container so we need to make this have a max-width, a padding and a margin auto on both left and right.

<div class="pt-20 md:pt-16 w-full max-w-2xl mx-auto align-middle flex">

#Width Of Header Sections

There are 3 sections inside the navigation bar, header text, main links and login links. The header text and login links are going to be given a same amount of space as the main links need the most area. We can do this by using the 1/5 and 3/5 width classes.

<div class="w-1/5 mr-2">

</div>

<nav class="w-3/5 p-3 mr-4 text-center">

</nav>

<div class="w-1/5 p-3 mr-2">

</div>

#Margin Around The Links

Then we can add a margin around the links by using mx-2.

<a href="{{ route('blog.tutorials.index') }}" class="mx-2">Tutorials</a>