Creating a Responsive Navbar with React + Tailwind CSS
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
- Node.js, here
- A browser, chrome or firefox or Microsoft Edge
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
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 ๐