Navigate Your Way through React Router: Create a Nav Bar with Tailwind CSS

This tutorial assumes you’ve already started developing your React app. If you need to build your app from scratch, refer to my step-by-step guide here.

Every app requires navigation to function. In building a React app for Surf Break Costa Rica, I fumbled my way through learning how to simplistically incorporate React Router DOM and Tailwind CSS to build out a navigation bar component. Here are my learnings so you can do so with ease!

Step 1: Create a Component Skeleton

Add the baseline components you’ll be using in your application. For Surf Break Costa Rica, I started by creating Home, Navigation, and Login components. Once these components are created, populate them with boilerplate and render the component name as an h1 in the return JSX for now.

Tip: “rafce” is a shortcut built into VSCode. Simply type “rafce” inside of your component and press enter to get React functional component boilerplate.

Type “rfc” to see a list of boilerplate shortcuts in VSCode.

Step 2: Incorporate React Router DOM

Install react-router-dom and in App.js, import BrowserRouter Switch and Route:

I encourage you to read more about React Router here.

Continue to build out your navigation routes. For Surf Break Costa Rica, I have route paths for home, flightinfo, itinerary, photos, and releaseform, as you can see below.

Tip: Make sure you define your initial home screen with route path “ / ” as an exact path. Otherwise, all of your routes will direct to home, since every path starts with “ / ”. This is because React Router will go through all of your routes and return the first match it finds. Using “exact path” disables this partial matching and ensures it only returns the route path that is an exact match to the URL.

Step 3: Build a Reusable Navigation Component

Surf Break Costa Rica will ultimately have two user types, staff and client, but to keep things simple, I will only focus on the client navigation for this guided walkthrough.

“Reusable” is the operative word in this step. I’ll import this component at the top of my return statement in each of my client-facing components. To keep my code DRY (Don’t Repeat Yourself) I may ultimately refactor down the line to include a ternary or if/else statement in my parent component (App.js in this case) return statement rendering different nav bars depending on the user type (client or staff).

If you haven’t played around with Tailwind CSS, I’m about to blow your mind. Having dabbled in several different ways of styling at this point in my learning journey (including, Sass, Flexbox, CSS Grid, Styled Components, Reactstrap, and Ant Design), I find this framework to be an amazingly effective way to build responsive, stylish React components.

The Tailwind CSS framework provides a set of utility classes that you can add to your JSX inline. These classes allow you to consistently style your projects with color choices, spacing, typography, shadows, etc.

I have to admit, I was confused and overwhelmed by the syntax at first, but I encourage you to take it apart piece-by-piece to understand exactly what each naming convention translates to. For example, you can easily incorporate responsive design into your application by adding a breakpoint prefix, like “sm” for screen sizes with a min-width of 640px or “lg” for screen sizes with a min-width of 1024px. For example, the code below says for small screen sizes, I want this text to be small and for large screen sizes, I want this text to be large.

<div class=”sm:text-sm lg:text-lg”>

Take advantage of the quick search bar on their website to delve into their docs as you go.

To get started using Tailwind CSS in your React app, follow the steps outlined in their documentation here.

The framework comes with a set of predefined styles. If you want to customize according to a style guide, like I did for Surf Break Costa Rica, you can do so by modifying your module.exports in tailwind.config.js. As you can see below, I customized my color scheme and font.

Tip: Each time you update the tailwind.config.js, you will need to stop and restart using npm start.

Now for the fun part; start coding with Tailwind CSS! Here is a snip of what I did for Surf Break Costa Rica. Feel free to swipe what you like for yours!

The Final Result

Drumroll, please… ta da! Here is the final result. A beautiful, responsive nav bar incorporating Surf Break Costa Rica’s brand elements.

Like what you see? Check out SBCR’s GitHub repo to reference my code in more detail.

I'm a Full Stack Web Developer, with a passion for the frontend and strong interest in React development.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store