Building a Basic Header with React and Tailwind

Read on for how to build a clean and simple header

Photo by Aaron Hermes on Unsplash.

Hi Folks, Farhan here. I am a Front-End Developer who recently helped build a responsive header for one of my side project. In this article, I will guide you through how to create your own simple desktop header using React and TailwindCSS.

By the end of this tutorial, you should accomplish the following result :

1. Setup

• Create a new React App by running this command in your terminal :

npx create-react-app header-app

• cdinto your header-app
• Install Tailwind by running this command :

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

• Install and Configure CRACO and react-router-dom package by running this commad :

npm install @craco/craco react-router-dom

• Open header-app in text-editor with code . You’ll have structure like this :
• 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": "craco start",
+     "build": "craco…