How To Make Navigation Bar In Tailwind CSS

Introduction

Tailwind CSS is a framework of CSS which helps users to do styling inside the HTML page in the classes of HTML tags.

Requirement

  • For using Tailwind CSS you must have installed Node.js

How to Setup Tailwind CSS

For installing Tailwind CSS you have to write some commands inside your terminal or command prompt. The commands are given below but before using commands we will create a new folder and open the folder inside the Visual Studio Code and then we will create an index.html file inside the folder then we will open the terminal of Visual studio code.

npm init -y
npm install -D tailwindcss postcss autoprefixer vite
npx tailwindcss init -p

After these three commands, we are going to do a small change inside our tailwind.config.js file

These are the output of the command,


Command 1 Output


Command 2 Output


Command 3 Output

Now inside the tailwind.config.js we have to change the content: [ ], into content:[“*”] it means we want to use our tailwind incomplete HTML, it will look like

After this we will create a CSS File and write the given code

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

and link our CSS file to the HTML page. Now we are ready to create our navigation bar

Inside the HTML page we will write our code, so first we will create a boilerplate of HTML which will look like this

how to make navigation bar in tailwind css

And now we will use the nav tag of HTML, inside the nav tag we will use the ul tag of HTML and inside the ul tag we will use the li tag of HTML, and then we will give some classes to the ul tag which are px-2 py-4 flex space-x-3. These classes will make some little changes to our navbar and our navbar is going to look like

Now we will add some classes inside the nav tag

Which are bg-purple-900 text-white

This tag changed the background color of the navbar and also changed the text color of navbar we also did some changes inside our ul tag and now our new classes of ul tag are px-10 py-4 flex space-x-3 justify-end and our navbar is now looking like

how to make navigation bar in tailwind css

Now we will see the complete code of our html page and the navbar as well

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="input.css">
    <title>Navigation bar</title>
</head>
<body>
   <nav class="bg-purple-900 text-white flex justify-between">
       <img src="images/WhatsApp Image 2022-03-10 at 3.36.35 PM.jpeg" class="h-14 rounded-full px-0" alt="">
       <ul class="px-10 py-4 flex space-x-3 ">
           <li class="cursor-pointer">Home</li>
           <li class="cursor-pointer">Contact</li>
           <li class="cursor-pointer">About</li>
           <li class="cursor-pointer">Blog</li>
           <li class="cursor-pointer">News</li>
       </ul>
     </nav>
  </body>
</html>

Here is the complete code of the navbar so you can see that we have designed a navbar in just 25 lines of code and our nav bar is looking like

how to make navigation bar in tailwind css

In this, we have used so many classes so now you will know about the work of the classes,

  1. Bg – this class is used for giving the background to the navbar
  2. Text – this class is used for designing the text like the color of text etc
  3. H – this class is used for setting the height of the image
  4. Flex – this class is used for making a flex for
  5. Space-x – this class is used for giving space from x-axis to every element
  6. Cursor-pointer – this class is used for changing the Cursor into a pointer
  7. Px – this class is used for giving padding from the x-axis
  8. Py – this class is used for giving padding from the y axis

Summary

In this article, we learned how to create a navigation bar in Tailwind CSS and you can see our Navigation bar is ready with some lines of code.