Creating a Responsive Navbar with React + Tailwind CSS

ยท

10 min read

A Navbar is like eyes for the website which will allow us navigate throughout the website seamlessly.

Code is here.!

Here's my github repo containing the codebase of the article incase of you get struck somewhere! ๐Ÿ‘‰ responsive-navbar

In this article we're gonna build a navigation bar using react and tailwind css.

So, What is react?

React is a Javascript framework designed by Facebook team for UI development.! React is published as a open-source project, you can have a look at GitHub ๐Ÿ‘‰ ReactJS

What is Tailwind CSS

Tailwind CSS is A utility-first CSS framework for rapid UI development.

By default We don't have any tailwind's CSS wrapper or components for react, so we'll use the css generated by tailwind-cli or postcss-cli

before we get started you might need these things

Hope all things are get packed and let's do something dirty ;)

Installing ReactJS

Here I'm using create-react-app which is a simple package developed by facebook for easy starting of reactjs projects with few things like basic template page, testing module etc..

To install reactjs I'm using a command line tool called npx which is preinstalled with the latest version of NodeJS or else you can upgrade the version you're using now ;)

npx create-react-app {project-name}

once you run this command npx will install things needed and will create the project with all the dependencies needed for starter template of reactjs project :xD

Hope till now everything has gone good and project has been installed in your system ;)

Now move to the project folder which was created by the above command and open CMD/terminal and type

npm start or yarn start

which will start development server at localhost:3000 for us so that we can confirm that reactjs project has been installed successfully ;)

npm and yarn are the package managers for NodeJS

Hope everything till now has gone good ;)

Configuring Tailwind CSS for ReactJS

By default we don't have any components built for tailwind likewise built for Bootstrap or Material-UI, so we have to install and configure it for the project manually :)

Installing Tailwind CSS & other dependencies

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

Once it's installed we can go to configuring the tailwind for our project

Now open the project with your favorite code editor, I'm going with Visual Studio code (Vscode). With the available integrated terminal in vscode helps us a lot ;)

Shortcut: use code . in your CMD or terminal from the project folder and vscode will open the project ;)

PostCSS configuation

Create file named postcss.config.js in project root source which should be at `{project-name}/postcss.config.js and add these lines for build configuration

module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    }
  }

TailWind Config

Just run this command at root level of project

npx tailwind init --full

Create a folder in named styles or assests/styles under {project-name}/src which should be like {project-name}/src/styles or {project-name}/src/assests/styles and create a file named tailwind.css and add these three lines

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

Later, at building time these modules will be converted into css as we all know :P

Till now we have created 2 files one for postcss and other is for tailwindcss.

Now open up package.json file and add this line in scripts sections

"build:css": "postcss src/styles/tailwind.css -o src/styles/index.css"

or

"build:css": "postcss src/assests/styles/tailwind.css -o src/assets/styles/index.css"

this command is for building out tailwind.css into index.css which we're gonna use in further ;)

Now we're gonna modify the other script commands so that whenever we start server or build the project tailwind css will also be built for production ready usage ;)

Scripts section in package.json should be update from

"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",

to

"start": "npm run build:css && react-scripts start",
"build": "npm run build:css &&  react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build:css": "postcss src/styles/tailwind.css -o src/styles/index.css"

we're Just adding the build:css command to other commands such as start and build which should be like npm run build:css && other commands so that the css will be build first rather than building or starting the project ;)

Now Just turn up the development server to build the tailwindcss for development usage by using

npm run start

When you start development server postcss is also builds the tailwind css for use in our project which is located at `{project-name}/src/[assests/]styles/index.css

This is the file we're gonna use, so we must include the file with out app.! To do so open the App.js file and remove line import './App.css' and add this line

import './[assests/]styles/index.css'

This will add the styles generated from the tailwind css to out App.!

Delete all the code in the function App from the tag header and then code is all to be

import './[assests/]styles/index.css';

function App() {
  return (
    <div className="App">

    </div>
  );
}
export default App;

Should look like this.!!!

Now create a file header.js located at {project-name}/src and paste the below code in the file ;)

import { AiOutlineClose, AiOutlineMenu } from "react-icons/ai";
import * as React from "react";
import "./styles/index.css"; // or import "./assests/styles/index.css"

function NavBar() {
  const [open, isOpen] = React.useState(true);
  return (
    <nav className="lg:flex lg:justify-between lg:shadow-lg">
      <div className="flex justify-between items-center px-4 py-4">
        <div
          style={{ whiteSpace: "nowrap" }}
          className="text-3xl ml-3 lg:ml-4 bold mt-1"
        >
          Mahesh Vagicherla
        </div>
        <div className="lg:hidden pt-2">
          {open ? (
            <AiOutlineMenu fontSize={28} onClick={() => isOpen(!open)} />
          ) : (
            <AiOutlineClose fontSize={28} onClick={() => isOpen(!open)} />
          )}
        </div>
      </div>
      <div className={open ? "hidden px-4 lg:block" : "block px-4 lg:block"}>
        <a
          href="#"
          style={{ whiteSpace: "nowrap", fontSize: "28px" }}
          className="font-sans duration-300 block mr-3 ml-3 lg:inline-block  rounded pr-2 pl-2 mt-3 hover:border-b-4 border-blue-200 pb-2 pt-1"
        >
          Home
        </a>
        <a
          href="#"
          style={{ whiteSpace: "nowrap", fontSize: "28px" }}
          className="font-sans duration-300 block mr-3 ml-3 lg:inline-block rounded pl-2 pr-2 hover:border-b-4  mt-3 hover:border-b-4 border-blue-200 pb-2 pt-1"
        >
          Nav Link 1
        </a>
        <a
          href="#"
          style={{ whiteSpace: "nowrap", fontSize: "28px" }}
          className="font-sans duration-300 block mr-3 ml-3 lg:inline-block rounded pl-2 pr-2  mt-3 hover:border-b-4 border-blue-200 pb-2 pt-1"
        >
          Nav Link 2
        </a>
      </div>
    </nav>
  );
}

export default NavBar;

In this file we're create a component named NavBar which later needs to be imported in App.js

Import the component to App.js

import NavBar from  './header';

Contents in App.js has to be

import NavBar from  './header';

function App() {
  return (
    <div className="App">
      <NavBar />
    </div>
  );
}

export default App;

Working Demo

React App.gif

References

This is my first article.! So I hope you wouldn't mind for mistakes or spellings.!

Any Suggestion or feedback helps me a lot to improve my self :)

Any suggestion or improvement is really helpful :)

Thanks for reading ๐Ÿ˜Š

Did you find this article valuable?

Support Mahesh Vagicherla by becoming a sponsor. Any amount is appreciated!

ย