Maquetando la página de login con Tailwind

Clase 3 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS

Sebastian Arrieta Villarreal

student•

Hay una herramienta muy genial para la web que se llama Prettier. Es un embellecedor o formatter de código muy usado en la industria!

Lo mejor de todo es que el equipo de Tailwind creó un plug-in de Prettier para ordenar las clases de la manera recomendada.

Para instalarlo se usa el comando

npm install -D prettier prettier-plugin-tailwindcss

Luego, creamos un archivo llamado prettier.config.js y colocamos lo siguiente:

// prettier.config.js
module.exports = {
  plugins: [require('prettier-plugin-tailwindcss')],
}

También podemos instalar la extensión de Prettier para VSCode

Santiago Casallas Bohorquez

student•

prettier y lint

Elcira Ibarra

student•

Tailwind me resulta muy intuitivo, pude personalizar el background color. En la propiedad bg- le agregamos corchetes y dentro el color personalizado en hexadecimal.

<div class="w-screen h-screen bg-[#DE728E] relative"></div>

Brenda Sutara

student•

No entiendo por qué no tengo mi archivo app.modules.ts? es algo de las nuevas versiones? lo debería tener? no se que hice mal

Neddy Ksenia Gonzalez Siles

student•

Exacto, Si te fijas el package.json, tiene la version 14 de Angular. Puedes crear la app con la version 14, con este comando:

npx @angular/cli@14 new trello-clone  
``` &#x20;

Neddy Ksenia Gonzalez Siles

student•

Exacto, Si te fijas el package.json, tiene la version 14 de Angular. Puedes crear la app con la version 14, con este comando:

npx @angular/cli@14 new trello-clone;

Henry David Fajardo Lagos

student•

Tengo todo excato como esta en el video pero las imagenes no me cargan, me sale la imagen rota y solo con el alt, sera por la version mas reciente que tengo de angular la 17?

fabian david pava reyes

student•

tuve el mismo problema pero lo solucione modificando l archivo angular.jscon

en assest modifique esto

y ya me funciono

John Erikc Alexander Obando Ramirez

student•

si es por las versiones mas recientes por lo general ya el tema de assets están ya para la carpeta public

"assets": [ { "glob": "**/*", "input": "public" }

colocar las imagenes hay

Milton Estrada

student•

ng g c pages/login --style=none --skip-tests

Jesner Wilian Ramirez Cueva

student•

Ojo, esta clase esta trabajando con angular 14 :c

Brenda Sutara

student•

Amo Tailwind, les dejo un link desde pueden encontrar todas las clases de tailwind como buscador https://tailwindcomponents.com/cheatsheet/![login-trello.png](https://static.platzi.com/media/user_upload/login-trello-0f3d6192-4662-4b27-af03-0ec8e2f45d4c.jpg)

Josué Eliezer Gómez Soto

student•

Para los que arrancamos este curso con angular 18, ahora la carpeta assets se sustituyo por public, que esta en la raiz del proyecto, dentro de esta creas la estructura de assets que necesitas

Reinaldo Mendoza

student•

Buen dato

Dave Juanes

student•

Si usan angular 19, cambien su carpeta assets a la carpeta public y funcionara con la configuración por defecto:

Juan Rossano

student•

para probar al aumentar la imagen de 60 puse 90 en lugar de 96 y me mostro enormes las imagenes ¿por que? ¿hay una escala para usar las imagenes? el 96 me pone que equivale a 384px, el 90 no pone nada.

Juan Rossano

student•

¿hay mas paginas como unDraw con recursos graficos para uso libre?

Dimas Arley Lopez Espinosa

student•

hasta el momento me parece una herramienta genial, es mi primera vez utilizando este framework

Juan Miguel Jimenez

student•

Me gusta lo simple que es tener un buen nivel de personalización con Tailwind frente a otros frameworks como bootstrap

Héctor Danilo Sebastián Salinas Ugalde

student••

Si tienen problemas en los paths de assets verificar en angular.json contenga correctamente el path: "assets": [

"src/assets",

{

"glob": "**/*",

"input": "public"

}

],

Con esa configuración implementada verificar que en el src de la imagen esté bien. Ejemplo: <img src="/assets/images/svg/trello/Trello_logo_light.svg" alt="">

si no lo muestra vuelvan a hacer el ng serve nuevamente y con eso debería resolverlo

Juan Rossano

student•

Los svg ¿no son tambien imagenes? ¿por que no ponerlos bajo la carpeta images en vez de directamente svg? Para unificar criterios, pregunto

Juan Rossano

student•

Al generar el componente con ng g c me aparece la clase vacia y no el constructor vacio ni el ngOnInit() ¿es agregado a mano o me falta algo? Porque en el video se ve ese codigo recien generado.

Victor Alfredo Matzar Say

student•

En las ultimas versiones de Angular, Angular CLI ya no genera automáticamente el constructor y ngOnInit. Supongo que lo quitaron para reducir el código repetitivo, ya que solo se necesita usarlos cuando está realizando una inyección de dependencia y un enlace al ciclo de vida.

Miguel Luque

student•

Tailwind me parece muy genial, pero quería saber tu opinión sobre el tema de que es anti-patron y que tan recomendado es usarlo de todas maneras.

Rocio Cuspoca Caro

student•

Estoy realizando el ejercicio como lo indica el video, pero al desplegar el proyecto no se muestran los estilos de tailwind, colocados desde el html , hice la instalación y configuración como lo indica Nicolás.

Miguel Luque

student•

debes revisar bien desde donde ejecutas el proyecto ya que el archivo de configuración de tailwind solo lo usa si lo ejecutas desde el folder del proyecto, normalmente pasa por eso.

Deiby Daniela Rique Porras

student•

A mi me pasó lo mismo y lo solucioné ajustando el archivo styles.scss, dejo por aquí la solución por si le sirve a alguien... yo modifiqué el archivo, npm i, y ng s.

@import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities';

Max Andy Diaz Neyra

student•

Sin miedo, papus y mamus. Para los que venimos de Angular 19: app.routes: app.routes:

import { Routes } from '@angular/router';
import { LoginComponent } from './pages/login/login.component';

export const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
  },
];

```app.component.ts:

```js
<router-outlet></router-outlet>

Max Andy Diaz Neyra

student•

Sin miedo, papus y mamus. Para los que venimos de Angular 19: app.routes:

import { Routes } from '@angular/router';
import { LoginComponent } from './pages/login/login.component';

export const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
  },
];

```app.component.ts:


```js
<router-outlet></router-outlet>

import { Routes } from '@angular/router';
import { LoginComponent } from './pages/login/login.component';

export const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
  },
];

```app.component.ts:

```js
<router-outlet></router-outlet>

import { Routes } from '@angular/router';
import { LoginComponent } from './pages/login/login.component';

export const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
  },
];

```app.component.ts:


```js
<router-outlet></router-outlet>

Maquetando la página de login con Tailwind

Introducción

¿Qué es el Angular CDK?

Instalando Angular CDK y TailwindCSS

Maquetando con Tailwind

Maquetando la página de login con Tailwind

Maquetando formularios con Tailwind

Componente de botón reutilizable

Reto: colores y propiedades dinámicas

Componentes interactivos con Angular CDK

Creando Overlays

Múltiples Overlays

Iconos en Angular con Font Awesome

Creando acordeones

Acordeones dinámicos

Drag and drop

Drag and drop con ordenamiento

Drag and drop con transferencia entre columnas

Drag and drop con columnas dinámicas

Modales y listas

Modales y diálogos

Modales recibiendo información

Listas con scroll

Listas con virtual scrolling

Table CDK

Tablas

Estilos en Tablas

Usando un DataSource en Tablas

Tablas con filtros y debounce

Próximos pasos para completar el Clon de Trello

Mejoras en UX y reusabilidad

Toma el Curso de Autenticación con Angular