Tutorial 2: Creando una aplicación Angular V17 con Tailwind

En este tutorial, aprenderás a usar Tailwind para dar estilo a aplicaciones Angular CLI.

El objetivo es construir un diseño de aplicación con un encabezado y pie de página con sus respectivas rutas.

Requisitos

Asegúrate de tener las siguientes herramientas instaladas:

• Node JS y NPM, visite su página para ver las instrucciones.
  • Ejecute node -v para verificar que tiene la versión 20 o superior.
  • Ejecute npm -v para comprobar que tiene la versión 10 o superior.
• Angular CLI (npm install -g @angular/cli)
  • Ejecute ng version para revisar que tiene la versión 17.

Si prefiere usar yarn, primero configure el administrador de paquetes predeterminado de Angular CLI. Esto asegura que la aplicación generada tenga un archivo yarn.lock en lugar de un paquete-lock.json.

1. Crea una nueva aplicación

Abra una terminal y ejecute el siguiente comando:

ng new angular17

El comando ng new genera una aplicación Angular básica en una carpeta llamada angular17 e instala las dependencias.

La ejecución de este comando te da un recorrido por varias preguntas que configuran tu app con los estilos que quieras.

Además, una de las nuevas actualizaciones de Angular V17 es que nos permite desde el comienzo crear nuestro server side rendering algo increíblemente útil.

Al final de la configuración, la CLI de Angular también inicializa un repositorio git y hace un commit inicial.

2. Abrir la aplicación en modo de desarrollo

Después que la instalación haya finalizado, ejecuta el siguiente comando e ingresa a la carpeta de tu proyecto.

cd angular17

En la carpeta del proyecto tú puedes iniciar el servidor de desarrollo usando el comando ng serve.

** El servidor de desarrollo de Angular utiliza el localhost:4200, abre tu navegador en localhost:4200**

Haz clic en el enlace anterior y comprueba que funciona. ¡Ahora si la aplicación está lista para utilizar algunos estilos 🤗!

3. Instala Tailwind

Ejecuta los siguientes dos comandos en la carpeta de tu proyecto para instalar Tailwind.

yarn add -D tailwindcss postcss autoprefixer
yarn add tailwindcss init

Después que finalice el proceso, abre el archivo tailwind.config.js y agrega lo siguiente:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Abre el archivo styles.css y agrega las siguientes directivas:

@tailwind base;
@tailwind components;
@tailwind utilities;

Si quieres comprobar que Tailwind se instalo haz un cambio pequeño en tu app.component.html, prueba agregando esto:

<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

MD Tip 💡
Recuerda que no debes eliminar la etiqueta <router-outlet></router-outlet>.

MDato 🗃️
Angular ahora no tiene modulos y en los siguientes pasos del tutorial te daras cuenta por que

4. Configura el layout de la aplicación

En este paso generaremos 3 componentes layout, header y footer dentro de una carpeta llamada ui.

💡 Es una buena idea mantener la UI (Interfaz de ususario) separada del resto de la aplicacion. Esta Separacion de tareas tambien te permite reutilizar facilmente la UI en otros proyectos.

Ejecuta el comando:

ng generate component ui/layout

Esto te generará una carpeta que se llama ui y dentro de esta un componente llamado layout.

A partir de aquí crearemos el componente header y footer dentro de esta carpeta, ejecutando estos 2 comandos:

ng generate component ui/header
ng generate component ui/footer

MDato
💡 El comando ng generate acepta abreviaturas: usa ng g c Para generar un componente, ng g s para generar un servicio, etc.

4.1 Implementa el LayoutComponent

Abre src/app/ui/layout/layout.component.html y remplaza su contenido por lo siguiente:

<div class="flex flex-col h-full justify-between">
  <app-header></app-header>
  <div class='flex-grow  py-4 px-16 text-center bg-pink-300 
    text-pink-900 '>
    <div class="text-pink-500 text-3xl">
    <router-outlet></router-outlet>
    </div>
  </div>
  <app-footer></app-footer>
</div>

Vas a notar que las etiquetas de header footer y router-outlet se colocan rojas, eso es porque debes importarlas en el respectivo componentes donde las uses

Abre src/app/ui/layout/layout.component.ts y agrega esto en los imports:

import { Component } from '@angular/core';
import {HeaderComponent} from '../header/header.component'
import {FooterComponent} from '../footer/footer.component'
import {RouterOutlet} from '@angular/router'

@Component({
  selector: 'app-layout',
  standalone: true,
  imports: [HeaderComponent,FooterComponent, RouterOutlet],
  templateUrl: './layout.component.html',
  styleUrl: './layout.component.scss'
})
export class LayoutComponent {

}

4.2 Usa el LayoutComponent

Abra el archivo src/app/app-routes.ts y agrega el siguiente código que es una lista de objetos que irán dentro del array de routes.

{
    path: '',
    component: LayoutComponent,
    children: [
      // Here we will add our application pages
    ],
  },

Para que puedas usar el LayoutComponent debes importarlo en este mismo archivo en la parte superior.

import {LayoutComponent} from './ui/layout/layout.component'

Abre el archivo app.component.html y deja solo la etiqueta router-outlet.

Guarda y deberías ver en tu navegador el HeaderComponent
y FooterComponent renderizados.

4.3 Implementa el Header

Abre el archivo header.component.html y pega este código

<div class='p-4 bg-violet-900 text-violet-300'>
  <div class="flex justify-between align-items">
    <div>LOGO</div>
    <div class="flex space-x-4">

      <a
        routerLinkActive="active" routerLink="/home" 
        class="bg-pink-500 text-white rounded-md px-3 py-2 
        text-sm font-medium" aria-current="page">Home</a>
      <a
        routerLinkActive="active" routerLink="/blog" 
        class="text-gray-300 hover:bg-pink-500 hover:text- 
        white rounded-md px-3 py-2 text-sm font- 
        medium">Blog</a>
      <a
        routerLinkActive="active" routerLink="/contact" 
        class="text-gray-300 hover:bg-pink-500 hover:text- 
        white rounded-md px-3 py-2 text-sm font- 
        medium">Contact</a>
    </div>
  </div>
</div>

Importa RoterLink y RoterLinkActive en el archivo header.component.ts.

 imports: [RouterLink, RouterLinkActive],

4.4 Implementa el Footer

Abre el archivo footer.component.html y pega este código

<div class='p-4 text-center bg-violet-900 text-violet-300'>
  COPYRIGHT &copy; 2069
</div>

5. Agrega páginas a tu aplicación

Con el layout en su lugar es momento de agregar páginas a nuestra app.

Ejecuta el siguiente comando:

ng g c pages/home

Abre el siguiente archivo en la ruta src/app/pages/home/home.component.html y remplaza el contenido por esto:

<div class="bg-white px-6 py-24 sm:py-32 lg:px-8">
  <div class="mx-auto max-w-2xl text-center">
    <h2 class="mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">This is my home</h2>
    <p class="mt-6 text-lg leading-8 text-gray-600">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.</p>
  </div>
</div>

Recuerdas que habiamos configurado nuestro layout en el archivo app-routes.ts

Agrega tu primera rutaHome que es hija del layout el cual es compartido en cualquiera de las rutas, copia y pega lo siguiente el archivo app-routes.ts dentro del arraychildren:

{ path: 'home', component: HomeComponent },

Y ahora, si das clic en la ruta Home en tu navegador te mostrará el Homecomponent que acabaste de diseñar en el punto anterior.

MDato 🗃️
Puedes investigar mas acerca de rutas hijas o Nesting routes aqui

5.1 Crea la página blog

Ejecuta el comando:

ng g c pages/blog

Abre el archivo blog.component.html y copia esto:

<section class="relative isolate overflow-hidden bg-white px-6 py-24 sm:py-32 lg:px-8">
  <div class="absolute inset-0 -z-10 bg-[radial-gradient(45rem_50rem_at_top,theme(colors.indigo.100),white)] opacity-20"></div>
  <div class="absolute inset-y-0 right-1/2 -z-10 mr-16 w-[200%] origin-bottom-left skew-x-[-30deg] bg-white shadow-xl shadow-indigo-600/10 ring-1 ring-indigo-50 sm:mr-28 lg:mr-0 xl:mr-16 xl:origin-center"></div>
  <div class="mx-auto max-w-2xl lg:max-w-4xl">
    <img class="mx-auto h-12" src="https://tailwindui.com/img/logos/workcation-logo-indigo-600.svg" alt="">
    <figure class="mt-10">
      <blockquote class="text-center text-xl font-semibold leading-8 text-gray-900 sm:text-2xl sm:leading-9">
        <p>“Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo expedita voluptas culpa sapiente alias molestiae. Numquam corrupti in laborum sed rerum et corporis.”</p>
      </blockquote>
      <figcaption class="mt-10">
        <img class="mx-auto h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
        <div class="mt-4 flex items-center justify-center space-x-3 text-base">
          <div class="font-semibold text-gray-900">Judith Black</div>
          <svg viewBox="0 0 2 2" width="3" height="3" aria-hidden="true" class="fill-gray-900">
            <circle cx="1" cy="1" r="1" />
          </svg>
          <div class="text-gray-600">CEO of Workcation</div>
        </div>
      </figcaption>
    </figure>
  </div>
</section>

Abre nuevamente el archivo de tus rutasapp-routes.ts y agrega la nueva ruta de blog

children: [
      { path: 'home', component: HomeComponent },
      { path: 'blog', component: BlogComponent },
    ],

💡 Recuerda que cada ruta que agregues la debes importar en la parte superior de este mismo archivo.

5.2 Crea la página contact

Ejecuta el comando:

ng g c pages/contact

Abre el archivo contact.component.html y copia esto:

 <form [formGroup]="form" class="mx-auto mt-16 max-w-xl sm:mt-20">
    <div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
      <div class="sm:col-span-2">
        <label for="email" class="block text-sm font-semibold leading-6 text-white">Email</label>
        <div class="mt-2.5">
          <input  formControlName="email" type="email" name="email" id="email" autocomplete="email" class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
        </div>
      </div><div class="sm:col-span-2">
        <label for="email" class="block text-sm font-semibold leading-6 text-white">Password</label>
        <div class="mt-2.5">
          <input formControlName="password"  type="email" name="email" id="password" autocomplete="email" class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
        </div>
      </div>
    </div>
    <div class="mt-10">
      <button type="submit" (click)="submit()" [disabled]="!form.value" class="block w-full rounded-md bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-pink-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Let's talk</button>
    </div>
  </form>

Abre nuevamente el archivo de tus rutas app.routes.ts y agrega la nueva ruta de contact

children: [
      { path: 'home', component: HomeComponent },
      { path: 'blog', component: BlogComponent },
      { path: 'contact', component: ContactComponent },
    ],

Para que nuestro formulario reactivo funcione debemos hacer algunos cambios en el archivo contact.component.ts

Copia y pega lo siguiente:

import { Component } from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms'

@Component({
  selector: 'app-contact',
  standalone: true,
  imports: [
    ReactiveFormsModule
  ],
  templateUrl: './contact.component.html',
  styleUrl: './contact.component.scss'
})
export class ContactComponent {

  form = new FormGroup({

    email: new FormControl(''),
    password: new FormControl(''),
  });
  public submit() {

    console.log(this.form.value);
  }
}

6. Redirigir la ruta raíz

Abre el archivo app.routes.ts y agrega el siguiente objeto en el array de Routes

{
    path: '',
    // If this path is the 'full' match...
    pathMatch: 'full',
    // ...redirect to this route.
    redirectTo:'home',
  },

Que hacer a partir de aquí?

Como se explica en la introducción, este es un punto de partida y debe ser sencillo mejorar esta app como te parezca

Tailwind es un framework de CSS poderoso y con muchas alternativas para colocar estilos a una app de forma rápida, después que aprendas a manejar su sintaxis podrás usarla a tu favor.

Te dejo por aquí su página oficial para que explores un poco más.

Conclusión

En este tutorial has aprendido a crear una aplicación básica y utilizar tailwind para crear un diseño con encabezado(header) y pie de página(footer) la aplicación tiene varias páginas, así que esta es una oportunidad para que apliques carga perezosa(Lazy loading).

Puedes guiarte por la nueva documentación de Angular V17 en la sección Guías detalladas(In depth Guides)

Si tienes alguna pregunta no dudes en dejar un comentario en DEV o enviarme un mensaje al X

Muchas gracias a Beeman por revisar este post.

Nos vemos en otro post ✋🏽