Maquetando la página de login con Tailwind
Clase 3 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS
Contenido del curso
Sebastian Arrieta Villarreal
student•
hace 3 años
Santiago Casallas Bohorquez
student•
hace 5 meses
Clase 3 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS
Contenido del curso
Sebastian Arrieta Villarreal
Santiago Casallas Bohorquez
Elcira Ibarra
Brenda Sutara
Neddy Ksenia Gonzalez Siles
Neddy Ksenia Gonzalez Siles
Henry David Fajardo Lagos
fabian david pava reyes
John Erikc Alexander Obando Ramirez
Milton Estrada
Jesner Wilian Ramirez Cueva
Brenda Sutara
Josué Eliezer Gómez Soto
Reinaldo Mendoza
Dave Juanes
Juan Rossano
Juan Rossano
Dimas Arley Lopez Espinosa
Juan Miguel Jimenez
Héctor Danilo Sebastián Salinas Ugalde
Juan Rossano
Juan Rossano
Victor Alfredo Matzar Say
Miguel Luque
Rocio Cuspoca Caro
Miguel Luque
Deiby Daniela Rique Porras
Max Andy Diaz Neyra
Max Andy Diaz Neyra
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
prettier y lint
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>
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
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 ```  
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;
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?
tuve el mismo problema pero lo solucione modificando l archivo angular.jscon
en assest modifique esto
y ya me funciono
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
ng g c pages/login --style=none --skip-tests
Ojo, esta clase esta trabajando con angular 14 :c
Amo Tailwind, les dejo un link desde pueden encontrar todas las clases de tailwind como buscador https://tailwindcomponents.com/cheatsheet/
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
Buen dato
Si usan angular 19, cambien su carpeta assets a la carpeta public y funcionara con la configuración por defecto:
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.
¿hay mas paginas como unDraw con recursos graficos para uso libre?
hasta el momento me parece una herramienta genial, es mi primera vez utilizando este framework
Me gusta lo simple que es tener un buen nivel de personalización con Tailwind frente a otros frameworks como bootstrap
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
Los svg ¿no son tambien imagenes? ¿por que no ponerlos bajo la carpeta images en vez de directamente svg? Para unificar criterios, pregunto
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.
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.
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.
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.
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.
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';
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>
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>