Aurelia 2 provides a powerful and flexible framework for building modern web applications. By integrating Tailwind CSS and Vite, we can create a fully responsive and beautifully styled weather dashboard that fetches real-time weather data. This guide will walk you through setting up the project, configuring Tailwind CSS, and building the UI.
Prerequisites
Ensure you have (latest LTS version recommended) installed.
1. Setting Up the Aurelia Project with Vite
Create a New Aurelia Project
Run the following command to scaffold a new Aurelia 2 project using Vite:
npx makes aurelia
Select "Default TypeScript App" and "Vite" as the bundler when prompted. When you're asked for a name, make something up or use weather-app.
Navigate to Your Project Directory
cd weather-app
2. Installing and Configuring Tailwind CSS
Install Tailwind CSS and Its Vite Plugin
To integrate Tailwind CSS with Vite, install the required dependencies:
npm install tailwindcss @tailwindcss/vite -D
Configure Vite to Use Tailwind CSS
Update your vite.config.ts to include the Tailwind CSS Vite plugin:
// vite.config.ts
import { defineConfig } from 'vite';
import aurelia from '@aurelia/vite-plugin';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
plugins: [aurelia(), tailwindcss()],
});
Include Tailwind in Your CSS
In your scaffolded project, you'll see a my-app.css file. Open it and add the following:
/* src/my-app.css */
@import 'tailwindcss';
Aurelia will automatically include this file when you run npm start because of the default conventions support in Aurelia projects.
3. Implementing the Weather Dashboard
Fetching Weather Data
Create a Weather Service to handle API requests:
// src/services/weather-service.ts
import { HttpClient } from '@aurelia/fetch-client';
export class WeatherService {
private http: HttpClient = new HttpClient();
private apiKey = 'YOUR_API_KEY';
private baseUrl = 'https://api.openweathermap.org/data/2.5/';
async getWeatherByCity(city: string): Promise<any> {
const response = await this.http.fetch(
`${this.baseUrl}weather?q=${city}&appid=${this.apiKey}&units=metric`
);
if (response.ok) {
return response.json();
} else {
throw new Error('City not found');
}
}
}
4. Creating the Weather Dashboard Component
Weather Dashboard View Model
Create a component that fetches weather data and manages state:
// src/components/weather-dashboard.ts
import { ICustomElementViewModel, inject } from 'aurelia';
import { WeatherService } from '../services/weather-service';
@inject(WeatherService)
export class WeatherDashboard implements ICustomElementViewModel {
public city = 'Brisbane';
public weatherData: any = null;
public errorMessage: string | null = null;
constructor(private weatherService: WeatherService) {}
async attached() {
await this.fetchWeather();
}
async fetchWeather() {
try {
this.errorMessage = null;
this.weatherData = await this.weatherService.getWeatherByCity(this.city);
} catch (error) {
this.errorMessage = error.message;
this.weatherData = null;
}
}
async search() {
await this.fetchWeather();
}
}
The browser will open automatically to the Aurelia app.
7. Additional Enhancements
Dark Mode Support: Configure Tailwind to support dark mode and apply corresponding styles.
Responsive Design: Utilize Tailwind’s responsive utilities for mobile-friendly UI.
Custom Themes: Extend Tailwind’s theme in tailwind.config.js for custom branding.
Hourly Forecast: Fetch and display hourly or weekly weather forecasts.
Conclusion
This guide demonstrated how to integrate Tailwind CSS with Aurelia 2 using Vite, enabling a responsive, modern, and styled weather dashboard. With real-time weather data from OpenWeatherMap, this project highlights Aurelia’s data-binding and service integration capabilities.
Sign up for a free API key from to fetch real-time weather data. You get a few thousand requests per day for free.
