Guía 06: TailwindCSS

Guía 06: TailwindCSS#

Actividades previas#

Diseño#

  1. Defina el objetivo de su 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.

    1. Agregue un archivo README.md con el título de su landing page y una breve descripción del objetivo de su proyecto.

    2. Agregue un archivo .gitignore con la plantilla de 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#

  1. Utilice la terminal para crear un proyecto Vite mediante npm:

    npm create vite@latest .

    1. Para Ok to proceed? (y) ingrese y.

    2. Para Current directory is not empty. Please choose how to proceed: seleccione la opción Ignore files and continue.

    3. Seleccione el framework como Vanilla.

    4. Seleccione la variante como JavaScript.

  2. Instale las dependencias del proyecto con el comando:

    npm install

  3. Inicie el servidor de desarrollo con el comando:

    npm run dev

  4. Abra su navegador y acceda a la dirección http://localhost:5173/ para ver su proyecto Vite en funcionamiento.

TailwindCSS#

Play CDN#

  1. Agregue la referencia a TailwindCSS con la etiqueta de script Play CDN al <head> de su archivo HTML.

    Agregue la etiqueta script con la referencia al archivo js en el Play CDN#
     1<!doctype html>
 2<html>
 3   <head>
 4
 5      ...
 6
 7      <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 8
 9   </head>
10   <body> ... </body>
11</html>

  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:

     1<body>
 2   <main>
 3      <div id="container-01">
 4         <h1>Tu presencia digital comienza aquí</h1>
 5         <p>Creamos experiencias web atractivas y rápidas con Tailwind CSS 4.1. Dale vida a tus ideas con un diseño moderno y responsivo.</p>
 6         <div id="container-02">
 7            <button id="start">Comenzar</button>
 8            <button id="demo">Ver demo</button>
 9         </div>
10      </div>
11   </main>
12</body>

  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:

    1. Incorpore la clase «bg-slate-50» a la etiqueta <main>.

    2. Modifique la etiqueta <div id="container-01"> agregándole la clase «mx-auto px-4 py-20 text-center».

    3. Agregue las clases «text-4xl font-extrabold tracking-tight text-gray-900» a la etiqueta <h1>

    4. Añada a la etiqueta <p> las clases «mt-6 text-lg leading-relaxed text-gray-600 max-w-2xl mx-auto»

    5. Agregue las clases «inline-block px-6 py-3 text-white bg-blue-600 rounded-lg» al elemento <button id="start">. Y, las clases «inline-block px-6 py-3 border border-gray-300 text-gray-700 rounded-lg» al elemento <button id="demo">.

  2. Compruebe el resultado en el navegador.

Flex#

  1. Utilice la documentación de TailwindCSS - Layout y el inspector del navegador

  2. Utilice un cliente de IAG para:

    1. Generar las clases para un margen superior de 2rem, convierte el contenedor en un contenedor flexbox, centra horizontalmente los elementos hijos y establece un espacio uniforme de 1rem entre ellos en la etiqueta <div id="container-02">.

    Prompt sugerido

    Para TailwindCSS versión 4.1, genera las clases para un margen superior de 2rem, convierte el contenedor en un contenedor flexbox, centra horizontalmente los elementos hijos y establece un espacio uniforme de 1rem entre ellos en la etiqueta <div id="container-02">.

    Ver la solución
    <div id="container-02" class="mt-8 flex justify-center gap-4"> ... </div>

  3. Compruebe el resultado en el navegador.

Modo Oscuro#

  1. Verifique modo oscuro de Chrome de la landing page.

  2. Utilice la documentación de TailwindCSS - Dark Mode y el inspector del navegador para cada uno de los siguientes cambios:

    1. Modifica la etiqueta <main> al agregar la clase «dark:bg-gray-900».

    2. Añade a la etiqueta <h1> la clase «dark:text-white» y a la etiqueta <p> la clase «dark:text-gray-300»

    3. Agregue a la etiqueta <button id="demo"> las clases «dark:border-gray-600 dark:text-white»

  3. Compruebe el resultado en el navegador.

Versionamiento#

  1. Versione local y remotamente la(s) rama(s) de desarrollo en el repositorio landing.

  2. Genere la(s) solicitud(es) de cambios (pull request) para la rama principal y apruebe los cambios.

Vercel#

  1. Acceda al sitio Vercel.

  2. Obtenga una cuenta en Vercel a partir de su cuenta GitHub.

  3. Autoriza a Vercel para que acceda a tus repositorios (puedes limitar a repos específicos si lo deseas).

  4. Dentro de Vercel, haz clic en el botón Import Project.

  5. Vercel mostrará una lista de tus repositorios de GitHub. Haz clic en el botón Import del repositorio que contiene tu proyecto.

  6. Vercel detectará automáticamente el framework (si usas Vite, Next.js, etc.). En este caso mostrará Vite.

  7. Haga clic en el botón Deploy.

  8. Se generará un dominio automático como [nombre_del_repositorio]-[nombre_del_contenedor].vercel.app.

Conclusiones#

Actividades autónomas#

Recursos extras#

En redes:

Tailwind CSS
Contenido