No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Maquetando la página de login con Tailwind

3/24
Recursos

Aportes 21

Preguntas 9

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

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>
ng g c pages/login --style=none --skip-tests
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
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/

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

Estoy buscando en undraw las ilustraciones de trello pero no las encuentro. ¿Podríais pasar el link?
[`https://undraw.co/illustrations`](https://undraw.co/illustrations)
<https://atlassian.design/resources/logo-library/>
me he enfocado mucho en el backend, pero nico hace que cada vez sea mas adicto a angular
Tenía ganas de probar Tailwind en Angular, nice

Uy esta super genial el tema de Tailwind. 💙💚
Solo que se me dificulta un poco entenderlo bien pero terminando esta ruta tomare el curso de Tailwind para comprenderlo a la perfeccion y así poder maquetar con más conocimiento.

muy cómodo tailwind para maquetado con esas clases predefinidas. Esperemos que suba el nivel a ver que mas cosas interesantes tiene. 😎

Yo tengo que ver la curva de aprendizaje para formarme una opinion. Parece potente pero hay que probar para ir conociendolo. No encontre dentro de la documentacion ejemplos donde se vea adjunto la visualizacion como en bootstrap. Algunas cosas las pruebo y veo el efecto para entender pero hay demasiadas opciones. Quizzas haya que hacer el curso de Tailwind. Me resulto mas facil boostrap. Quizas al terminar este curso piense distinto.

En el primer intento las dos imágenes estaban a la izquierda. Viendo en detalle había copiado el texto del nombre de la imagen pero ahí dice rigth y en la directiva right, o sea invertida las ultimas letras. Lo comento por si a alguien le pasa y porque me parece raro que el nombre del archivo este mal escrito y no parece poder escribirse de la dos formas porque solo una reconoce la directiva.

Quede anonadado con esta clase! Espero que las siguientes sean igual y mejores!

Muy bueno y útil…

TailwindCSS en lo personal me parece util al momento de estilizar elementos de HTML que no requieran de muchos estilos. Tal y como lo hemos hecho hasta ahora.

ng new trello-clone
cd trello-clonenpm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
"./src/**/*.{html,ts}",
@tailwind base;
@tailwind components;
@tailwind utilities;

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

ng serve -o
ng add @angular/cdk
ng g c pages/login --style=none --skip-tests

Hola me gusratia que el profesor que veo que tambien da clases similares en su canal de youtube y hasta un poco mejor explicado este tema pero nos gustaria a nosotros los estudiantes saber o como actulizar esta clase por que sigo todos los pasos pero ya esta un poco obsoleto ya que esta version de angular no es la actual y nos cuesta a los que apenas estamos comenzando que se puede hacer