Curso de tailwind CSS

En este módulo, desarrollaremos una landing page moderna utilizando Tailwind CSS, donde implementaremos dark mode, añadiremos animaciones y transiciones para mejorar la experiencia de usuario (UI/UX), y nos aseguraremos de que sea completamente responsiva para todos los dispositivos.

Creación de una landing page moderna con Tailwind CSS

  1. Estructura básica del HTML A continuación, creamos la estructura básica de una landing page con una cabecera (header), una sección de características (features), y una llamada a la acción (CTA).

    1<!DOCTYPE html>
2<html lang="es">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link href="dist/output.css" rel="stylesheet">
7  <title>Landing Page</title>
8</head>
9<body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
10
11  <!-- Header -->
12  <header class="bg-white dark:bg-gray-800 shadow-md">
13    <div class="container mx-auto p-4 flex justify-between items-center">
14      <h1 class="text-2xl font-bold">Mi Página</h1>
15      <nav>
16        <ul class="flex space-x-4">
17          <li><a href="#" class="hover:text-blue-500">Inicio</a></li>
18          <li><a href="#" class="hover:text-blue-500">Características</a></li>
19          <li><a href="#" class="hover:text-blue-500">Contacto</a></li>
20        </ul>
21      </nav>
22    </div>
23  </header>
24
25  <!-- Features Section -->
26  <section class="container mx-auto py-16">
27    <div class="text-center mb-12">
28      <h2 class="text-4xl font-semibold">Características</h2>
29      <p class="text-lg text-gray-700 dark:text-gray-300">Explora lo que nuestra plataforma ofrece</p>
30    </div>
31    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
32      <div class="p-6 bg-white dark:bg-gray-800 shadow-lg rounded-lg transition duration-300 hover:shadow-2xl">
33        <h3 class="text-2xl font-bold mb-4">Característica 1</h3>
34        <p>Descripción de la característica 1.</p>
35      </div>
36      <div class="p-6 bg-white dark:bg-gray-800 shadow-lg rounded-lg transition duration-300 hover:shadow-2xl">
37        <h3 class="text-2xl font-bold mb-4">Característica 2</h3>
38        <p>Descripción de la característica 2.</p>
39      </div>
40      <div class="p-6 bg-white dark:bg-gray-800 shadow-lg rounded-lg transition duration-300 hover:shadow-2xl">
41        <h3 class="text-2xl font-bold mb-4">Característica 3</h3>
42        <p>Descripción de la característica 3.</p>
43      </div>
44    </div>
45  </section>
46
47  <!-- CTA Section -->
48  <section class="bg-blue-500 py-16">
49    <div class="container mx-auto text-center text-white">
50      <h2 class="text-3xl font-bold mb-4">¿Listo para empezar?</h2>
51      <p class="mb-8">Regístrate hoy y aprovecha nuestras características.</p>
52      <a href="#" class="bg-white text-blue-500 px-8 py-3 rounded-full hover:bg-gray-100 transition duration-300">Empezar</a>
53    </div>
54  </section>
55
56</body>
57</html>

  2. Estructura explicada:

    • Header: Contiene el logotipo de la página y un menú de navegación.
    • Features Section: Muestra tres características con un diseño moderno, utilizando grid para un diseño responsivo.
    • CTA Section: Una llamada a la acción clara y atractiva con un botón centrado.

Implementación de dark mode

Tailwind CSS facilita la implementación de dark mode. Al configurar la clase dark en el elemento <body>, se pueden definir estilos tanto para el modo claro como para el modo oscuro.

  1. Activar dark mode en el archivo tailwind.config.js:

    1module.exports = {
2  darkMode: 'class', // o 'media' para activar automáticamente según la configuración del sistema
3  theme: {
4    extend: {},
5  },
6  plugins: [],
7}

  2. Cambiar entre dark y light mode: Para que los usuarios puedan alternar entre dark mode y light mode, podemos añadir un botón en el header que cambie la clase dark en el <body>.

    1<button id="dark-mode-toggle" class="bg-gray-800 text-white p-2 rounded">Modo Oscuro</button>
2
3<script>
4  const toggleButton = document.getElementById('dark-mode-toggle');
5  const body = document.body;
6
7  toggleButton.addEventListener('click', () => {
8    body.classList.toggle('dark');
9  });
10</script>

    Ahora, el botón permitirá cambiar entre el modo claro y oscuro al hacer clic.

Referencia: Implementación de Dark Mode en Tailwind

Uso de animaciones y transiciones para mejorar la UI/UX

Las transiciones y animaciones ayudan a mejorar la experiencia del usuario al suavizar los cambios visuales y hacer la interfaz más interactiva. Tailwind proporciona utilidades predefinidas para ambas.

  1. Transiciones (transition): Puedes aplicar transiciones suaves a cualquier cambio de estado, como en el ejemplo anterior de las tarjetas de características:

    1<div class="transition duration-300 hover:shadow-2xl">...</div>

    Aquí se aplica una transición de 300ms cuando el usuario pasa el mouse sobre la tarjeta (hover:shadow-2xl), lo que mejora la experiencia visual.

  2. Animaciones (animate): Para animaciones más complejas, puedes usar las clases animate-. Tailwind incluye animaciones predefinidas como animate-bounce, animate-spin, animate-pulse, entre otras.

    Ejemplo de un botón con animación:

    1<a href="#" class="bg-blue-500 text-white px-8 py-3 rounded-full animate-bounce">Empezar</a>

    Este botón "salta" repetidamente, atrayendo la atención del usuario.

Referencia: Transiciones y Animaciones en Tailwind

Implementación de diseño completamente responsivo

Tailwind CSS facilita la creación de layouts adaptativos mediante sus clases utilitarias y breakpoints. Ya vimos en módulos anteriores cómo usar breakpoints (sm:, md:, lg:, etc.) para adaptar el diseño a diferentes tamaños de pantalla.

  1. Diseño adaptativo con Grid: El diseño de la sección de características utiliza grid para crear un layout con una columna en móviles y tres columnas en pantallas más grandes:

    1<div class="grid grid-cols-1 md:grid-cols-3 gap-8">...</div>

  2. Uso de clases responsivas en el contenedor: El uso de container mx-auto asegura que el contenido esté centrado en pantallas grandes y que el diseño sea fluido en pantallas pequeñas.

  3. Adaptación de tipografía y tamaños: Puedes ajustar los tamaños de texto o paddings según el tamaño de la pantalla usando las clases de breakpoints:

    1<h2 class="text-2xl md:text-4xl">Título adaptativo</h2>

    En este ejemplo, el tamaño del texto cambiará de 2xl en pantallas pequeñas a 4xl en pantallas medianas o más grandes.

Referencia: Documentación sobre diseño responsivo

Conclusión

En este proyecto final, hemos cubierto cómo crear una landing page moderna utilizando Tailwind CSS, implementando características clave como dark mode, transiciones y animaciones para mejorar la UI/UX, y asegurándonos de que el diseño sea completamente responsivo para ofrecer una experiencia óptima en cualquier dispositivo. Este proyecto te da una base sólida para construir páginas web modernas y atractivas con Tailwind.

    ← Frameworks PopularesVolver al curso