Tutorial 2: Creando una aplicación Angular V17 con Tailwind
Published: 2023-12-03 15:26:55

---
title: Tutorial 2: Creando una aplicación Angular V17 con Tailwind
published: true
description: 
series: Caja de Herramientas del Desarrollador
cover_image: "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7tnqjc63exhfxfnfxi1q.png"
# Use a ratio of 100:42 for best results.
# published_at: 2023-11-29 19:23 +0000
---

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](https://nodejs.org/en/) 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](https://dev.to/ruslangonzalez/configurar-yarn-en-tus-proyectos-de-angular-video-goj). 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.

![Styles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i2n97mne065c4guwvnck.png)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nbwrtm1ki1mp51se8z1c.png)

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](ocalhost: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:

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```
Abre el archivo `styles.css` y agrega las siguientes directivas:

```css
@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:

```html
<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:

```html
<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:

```typescript
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`.

```typescript
{
    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.

```typescript
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

```html
<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

```html
<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:

```html
<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 ruta`Home` 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 array`children:`

```typescript
{ 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](https://angular.dev/guide/routing/common-router-tasks#nesting-routes)

## 5.1  Crea la página blog

Ejecuta el comando:

```
ng g c pages/blog
```
Abre el archivo `blog.component.html` y copia esto:

```html
<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 rutas`app-routes.ts` y agrega la nueva ruta de `blog`

```typescript
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:

```html
 <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`

```typescript
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:

```typescript

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`

```typescript
{
    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í]( https://tailwindui.com/) 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)](https://angular.dev/guide/ngmodules/lazy-loading#verify-lazy-loading)

Si tienes alguna pregunta no dudes en dejar un comentario en DEV o enviarme un mensaje al [X](https://twitter.com/derlys_paola)

Muchas gracias a [Beeman](https://twitter.com/beeman_nl) por revisar este post.

Nos vemos en otro post ✋🏽