En esta clase, comenzaremos la creación de la interfaz de Airbnb configurando Tailwind CSS y estableciendo los estilos globales.
Análisis de la Página de Airbnb
Antes de comenzar con la implementación, analizamos la estructura de la página actual de Airbnb:
- Barra superior (Top Bar)
- Cabecera (Header)
- Filtros de búsqueda
- Lista de alojamientos
- Sección de inspiración
- Pie de página (Footer)
La interfaz se diseñará siguiendo una metodología Mobile First, asegurando que la experiencia en dispositivos móviles sea fluida antes de adaptarla a pantallas más grandes.
Configuración de Tailwind CSS
-
Instalación y Configuración
- Se ha instalado Tailwind CSS junto con Alpine.js para manejar interactividad.
- Se ha añadido el archivo de estilos de producción.
- Se han definido las fuentes, colores y estilos base en la configuración de Tailwind.
-
Definición de Colores Personalizados
- Para mantener la coherencia con el diseño de Airbnb, se han extraído los colores principales.
- Se han identificado los colores oficiales usando herramientas de inspección y referencias en la documentación de la marca.
Los colores establecidos son:
- Primario (Accent):
#FF5A5F
- Texto principal:
#222222
- Gris claro:
#767676
- Gris oscuro:
#484848
- Verde de confirmación:
#A69900
- Naranja de alerta:
#FC642D
Estos colores se han añadido a la configuración de Tailwind para ser usados directamente en las clases de estilo.
- Definición de Tipografía
- Airbnb utiliza la fuente Circular, la cual no está disponible en Google Fonts.
- Como alternativa, se ha seleccionado Nunito, que tiene una apariencia similar.
- La fuente se ha añadido a Tailwind y se ha aplicado a los estilos globales.
Verificación de la Configuración
Para asegurarnos de que la configuración es correcta:
- Se ha probado la aplicación de clases como
text-primary, text-gray-light, bg-accent, etc.
- Se ha comprobado la correcta carga de la fuente Nunito en los elementos de la interfaz.
- Se ha revisado la configuración en
tailwind.config.js para verificar que los valores personalizados se aplican correctamente.
