Build a navbar using Tailwind CSS

Tailwind CSS is a very powerful utility CSS framework, which consists of user-friendly classes and it is very scalable, customizable according to your requirements. While using Tailwind CSS you don’t need to remember class names as they are very similar to their original CSS property. For example, to add display: flex you can use class = "flex", for flex-direction: column you can directly add class = "flex-col" .

Hi, I am Adarsh and I am a front-end web developer. Today we will learn how to use tailwind CSS in the efficient manner so that, we can build complex components by breaking them down into simpler components. In this series we will learn many other utilities of tailwind CSS.

So, let’s dig into it !!

If you have already set up the tailwind css in your workspace then you can skip below part.

Setting Up Tailwind CSS

Let’s start with including Tailwind CSS into our workspace. We can directly get tailwind by adding following line to our HTML code:

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

Or you can install using npm

Vue JS

Run following command to install via npm:

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Generate your tailwind.config.js for more customization by running:

npx tailwindcss init -p

This will create a tailwind.config.js file at the root of your project. It will look like this:

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Finally create a css file in your src directory and add following code to it:

@tailwind base;
@tailwind components;
@tailwind utilities;

and last but not least, include CSS file into your main.js by adding this chunk of code:

import './index.css'

React JS

Run following command to install via npm:

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Install and configure CARCO

Since Create React App doesn’t let you override the PostCSS configuration natively, we also need to install CRACO to be able to configure Tailwind:

npm install @craco/craco

Once it’s installed, update your scripts in your package.json file to use craco instead of react-scripts for all scripts except eject:

{
    // ...
    "scripts": { 
  -     "start": "react-scripts build",
  -     "test": "react-scripts test",
  +     "start": "craco start",
  +     "build": "craco build",
  +     "test": "craco test",
              "eject": "react-scripts eject"
      },
}

Next, create a craco.config.js at the root of our project and add the tailwindcss and autoprefixer as PostCSS plugins:

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

Create Your Configuration File:

Next, generate your tailwind.config.js file:

npx tailwindcss init

This will create a minimal tailwind.config.js file at the root of your project:

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Open the ./src/index.css file that Create React App generates for you by default and use the @tailwind directive to include Tailwind's base, components, and utilities styles, replacing the original file contents:

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Yay ! Now we are done with setting up and we can get handsy to CSS.

So today we will build a Navbar using tailwind CSS.

Here’s the output image of our beautiful navbar that we gonna build in few moments.

First, let’s create a parent div in which, we will be having our logo and other useful links as its child. As you can see above, in output image we need a dark-gray background for our navbar. So, in tailwind we have vast variety of colors that we can adjust according to the contrast we require. Its value ranges from 50–900. For example we want gray color in our navbar background: we will use this class: bg-gray-800 . Same we can do with opacity but it ranges from 0 to 100. Here we’ll use this class: bg-opacity-90 , we can also do bg-opacity-40 in same manner if we wanted more lighter background.

Moreover we can add margin, padding, position and many more properties to our elements. In margin, for adding it in x-direction, we can directly use mx-4 or my-4 for y-direction. We can add padding in same way using px-4 or py-4 . If you want to add same margin or padding in all direction using one class, you can use m-4 or p-4 . It will be added in both x and y direction.

For aligning items center you can use items-center , for justifying them center you can add justify-center .

Yay, now you are familiar to basic stuff in tailwind CSS. Isn’t it pretty simple ? Of course it is, we don’t need to write a single line of code in our CSS file. We can get rid of unnecessary classes and id now.

Now our parent div code will look something like this:

Yay ! Now we have build base of our navbar. It must be looking like this:

Now we will break our navbar in two components, so that it will be easy for us to design them separately and properly. As we can see, there are two parts, first is logo part and second is other links part.

First we will go with logo part. Again we have two small components here: First is logo-img and second is logo-text. So, we will wrap them in a single div and then our code will look like this:

As you can see above we needed the width of logo not as per its original size, so we used w-16 to resize it according to our design, in this manner you can give width to different elements by applying this class to them. You can give them to div, span, image, label, etc elements.

Now, as we needed the text size larger for our logo name, we used text-2xl or we could used text-sm, text-md, text-lg, text-xl, text-3xl, text-4xl upto , and in the same way we can add weight to our text by adding text-semibold and other font weights too in tailwind css.

Finally, we will design second part of our navbar that is “other links” part which looks like this:

Here we will wrap all the links under a div and more further under ul . For this section our code will look like this:

As we needed a bit margin between links we added ml-5 and some padding to make it crystal clear. As you can see above, last link having text subscribe, we added border-radius just by adding rounded class to it. We can give more precise border-radius by using rounded-sm, rounded-lg, rounded-xl, rounded-2xl,etc. according to our requirements.

Our, final code will be:

Yay, now we have completed our navbar with a beautiful shadow under it and it must be looking like the output shown below:

Thank you so much guys for reading this article, till here !

Feel free to ask queries regarding above component or Tailwind CSS under comment section. We’ll be building more cool components using Tailwind CSS.

Here’s a very cool feature ! In tailwind we can even make our components responsive for different screen sizes. I’ll discuss that part in our next tutorial, so stay connected.

Till then Happy Coding !!