.. Copyright (c) 2025 Allan Avendaño Sudario Licensed under Creative Commons Attribution-ShareAlike 4.0 International License SPDX-License-Identifier: CC-BY-SA-4.0 ==================== Guía 06: TailwindCSS ==================== .. topic:: Objetivo específico :class: objetivo Evaluar el uso de clases utilitarias de TailwindCSS en la creación de una landing page funcional y atractiva considerando su adecuación a los requerimientos específicos del diseño. Actividades previas ===================== Diseño ------ 1. Defina el objetivo de su :term:`landing page`, p.e.: venta de productos de belleza, información de un grupo estudiantil, datos de una veterinaria, noticias de KPOP, etc. 2. Identifique las secciones de su landing page, p.e.: encabezado, presentación, servicios, testimonios, contacto, etc. Ambiente de desarrollo ---------------------- 1. Cree un repositorio en GitHub con el nombre *landing*. a) Agregue un archivo README.md con el título de su landing page y una breve descripción del objetivo de su proyecto. b) Agregue un archivo :term:`.gitignore` con la plantilla de :term:`Node`. 2. Acceda a su proyecto *landing* en Codespaces o en su máquina local. 3. Cree y utilice la(s) rama(s) de desarrollo. Actividades en clases ===================== Vite ---- .. sidebar:: .. image:: https://pbs.twimg.com/media/EtZYf1FWYAMmtHj.jpg Más información en el sitio de `Vite `_. 1. Utilice la terminal para crear un proyecto :term:`Vite` mediante :term:`npm`: .. code-block:: bash npm create vite@latest . a) Para `Ok to proceed? (y)` ingrese `y`. b) Para `Current directory is not empty. Please choose how to proceed:` seleccione la opción `Ignore files and continue`. c) Seleccione el framework como `Vanilla`. d) Seleccione la variante como `JavaScript`. 2. Instale las dependencias del proyecto con el comando: .. code-block:: bash npm install 3. Inicie el servidor de desarrollo con el comando: .. code-block:: bash npm run dev 4. Abra su navegador y acceda a la dirección `http://localhost:5173/` para ver su proyecto Vite en funcionamiento. TailwindCSS ----------- .. sidebar:: .. image:: https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Tailwind_CSS_logo.svg/2560px-Tailwind_CSS_logo.svg.png Documentación disponible en `TailwindCSS `_. Play CDN ^^^^^^^^ 1. Agregue la referencia a :term:`TailwindCSS` con la etiqueta de script Play :term:`CDN` al `` de su archivo HTML. .. code-block:: html :caption: Agregue la etiqueta script con la referencia al archivo js en el Play CDN :linenos: :emphasize-lines: 7 ... ... 2. Compruebe el resultado de la petición en el navegador. Sección Principal (Hero Section) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 1. Reemplace el contenido del cuerpo del documento HTML, por: .. code-block:: html :linenos: :emphasize-lines: 2-11

Tu presencia digital comienza aquí

Creamos experiencias web atractivas y rápidas con Tailwind CSS 4.1. Dale vida a tus ideas con un diseño moderno y responsivo.

2. Compruebe el resultado en el navegador. Clases utilitarias ^^^^^^^^^^^^^^^^^^ 1. Utilice la documentación `TailwindCSS - Estilo con clases de utilidad `_ y el inspector del navegador para cada uno de los siguientes cambios: a) Incorpore la clase "bg-slate-50" a la etiqueta `
`. b) Modifique la etiqueta `
` agregándole la clase "mx-auto px-4 py-20 text-center". c) Agregue las clases "text-4xl font-extrabold tracking-tight text-gray-900" a la etiqueta `

` d) Añada a la etiqueta `

` las clases "mt-6 text-lg leading-relaxed text-gray-600 max-w-2xl mx-auto" e) Agregue las clases "inline-block px-6 py-3 text-white bg-blue-600 rounded-lg" al elemento `