Table of contents
In this blog, we will be creating Weather app using ReactJS and TailwindCSS.
Project Overview
Before starting the project we shall show you how would our project look.
The above image is the UI of our project.
So, as you can see we are going to create a Weather App we are going to create 2 divisions where we will be adding Input and a submit button in the 1st division and the 2nd division will be containing the main section which will have all the details of the weather of that particular place which you enter.
So, lets begin with our project!!!
Creating UI of our Project
So, as you saw in the above section we need to create two main sections / divisions for our project, before adding this sections in our project you need to create a react project using create-react-app using the below command :
npx create-react-app Weather-App
After creating the react project we need to go to App.js and add 2 divisions for the project.
We will be creating 4 components in this project
These are the 4 components which we will be creating in our project.
Now we will be adding a starter code in MainSection.jsx
Now we will import this MainSection.jsx and add the component in App.jsx .
After Adding this component we will start the server and see if we can see MainSection text on the screen.
As you can see MainSection Text is visible.
Now we will configure TailwindCSS in our project.
To install TailwindCSS we will run the below command,
npm install -D tailwindcss
npx tailwindcss init
Now we will configure the path for TailwindCSS in our project.
Now we will add Tailwind directives to our index.css file
Now we are done with setting up TailwindCSS in our project.
Now we will setup the font Changa One from google font in our project.
We are done adding font in our project, Lets start with the project!!.
So we will now add starter code to our remaining 3 components and we will import them into MainSection.jsx .
Now as we have set up all the necessary files which we need for the project we will add an image that we will be using for the MainSections background in src/assets folder.
Now we will put an input box and submit button in the upper division in the App.jsx file.
Now we will add styling to the main container, sub-container and to the input box and submit button using TailwindCSS Classes.
After styling the components we will further move to the MainSection Component
Now we will style the main container of the Main Section.
Now we put 1 main container and 3 sub-container in UpperSection.jsx and Hard Code the value in it so that we can see how it would look like.
As we have hard coded the value now we will style the division in the UpperSection.jsx
Now we will move to the MiddleSection.jsx and we will create multiple nested division in it which will be for the 4 parameters which are Latitude, Longitude, Sunrise and Sunset.
So we are done with the structure of our MiddleSection.jsx , now we will hard code the value of every particular division and style them with TailwindCSS classes.
We are done with the styling of the MiddleSection.jsx and we will now begin with the last section of our project which is LowerSection.jsx .
Now we will be needing 2 division which will contain weather status in one divisoin and other will have pressure, humidity and wind speed.
So, here also we will be using nested division for the values and title of the status, pressure, humidity, and wind speed.
Now we will style the whole LowerSection.jsx .
So we are completed with the LowerSection.jsx and the UI of the Weather App is completed and if We view the project on the browser then the output will be
So, this was the UI of our Weather App and the further part of this project is making it dynamic and taking the data from the API response and displaying it on our project UI.
So, in this blog, we saw how to make the UI of Weather App in ReactJS and TailwindCSS. There is much more to learn about the use of TailwindCSS in ReactJS, explore this topic and its used cases and elevate your skills.
Adios Amigos 👋👋