Welcome to Weather Now, a weather application built using HTML, fully styled with Tailwind CSS, and powered by JavaScript. This app provides real-time weather updates, including temperature, wind speed, humidity, and a 5-day weather forecast.
- Real-time weather updates.
- Displays temperature, wind speed, and humidity.
- 5-day weather forecast with icons and descriptions.
- Responsive design with a modern and clean user interface.
To set up Tailwind CSS for this project, follow the steps below:
-
Install Tailwind CSS
Open your terminal and run:npm install -D tailwindcss
-
Initialize Tailwind CSS
Initialize the Tailwind configuration file by running:npx tailwindcss init
-
Configure Tailwind
Update yourtailwind.config.js
file with the following content to specify where Tailwind should look for content:module.exports = { content: ["*.html"], theme: { extend: {}, }, plugins: [], };
-
Include Tailwind in Your CSS
Create aninput.css
file and include the Tailwind directives:@tailwind base; @tailwind components; @tailwind utilities;
-
Compile Tailwind CSS
Compile the CSS by running the following command:npx tailwindcss -i ./input.css -o ./style.css --watch
This command will process your
input.css
file and output the compiled CSS tostyle.css
. The--watch
flag will keep the process running and update the CSS automatically whenever changes are made.
- Clone the repository.
- Set up Tailwind CSS as described above.
- Open
index.html
in your browser to view the application.
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT LICENSE.