¿Cómo crear una tienda en línea con Angular y Tailwind CSS?
Si estás buscando construir una tienda en línea que no solo gestione productos desde una API, sino que también implemente un carrito de compras con eficacia y agilidad, estás en el lugar correcto. En este proyecto, vamos a aprovechar el poder de Angular para la gestión de nuestra aplicación y Tailwind CSS para la maquetación, lo que simplificará enormemente el proceso de estilización, permitiéndonos centrarnos en la lógica. Te guiaremos paso a paso desde la creación del proyecto hasta la integración exitosa de Tailwind con Angular.
¿Cómo iniciamos nuestro proyecto Angular?
Iniciar un proyecto Angular es un proceso directo con la herramienta NginiU. Aquí están los pasos básicos:
Usar el comando ng new seguido del nombre del proyecto. En este caso, lo llamamos "Store".
Especificar que es una aplicación Standalone y optar por saltarse las pruebas unitarias iniciales. Para ello, usamos el flag --skip-tests.
Configurar el enrutamiento respondiendo 'sí'.
Elegir el preprocesador, donde seleccionamos CSS para simplificar.
Esperar la configuración automática del proyecto, ya que Angular hace gran parte del trabajo por nosotros.
Después de estos pasos, ingresamos al nuevo directorio del proyecto con cd Store y preparamos nuestro entorno para el siguiente paso crucial: la integración de Tailwind CSS.
¿Cómo integramos Tailwind CSS con Angular?
Tailwind CSS ha ganado popularidad considerable en la industria debido a su capacidad para acelerar la maquetación de componentes. Para integrarlo con Angular, seguimos los pasos claros y listados en la documentación oficial:
Instalación de dependencias:
En la terminal, instalamos las librerías necesarias con el siguiente comando:
npminstall tailwindcss postcss autoprefixer
Inicialización de Tailwind:
Generamos el archivo de configuración tailwind.config.js ejecutando:
npx tailwindcss init
Y luego, modificamos el archivo para incluir los paths que Tailwind necesita para funcionar correctamente, normalmente para identificar clases presentes en archivos HTML y TypeScript.
Configuración de estilos globales:
En el archivo styles.css del proyecto, agregamos los siguientes elementos básicos de Tailwind:
Con la configuración completa, es hora de ejecutar y probar la aplicación. Usamos el comando ng serve para compilar y abrir la aplicación localmente. Si todo ha funcionado correctamente, Angular nos proporcionará una URL local (usualmente http://localhost:4200) donde podremos ver nuestro proyecto en acción.
Para verificar que Tailwind esté correctamente configurado, sustituimos el contenido del componente principal por un simple encabezado estilo Tailwind. Por ejemplo:
<h1class="text-3xl font-bold underline"> Hola Mundo
</h1>
Este encabezado debe mostrar el texto con las características de estilo asignadas por Tailwind, como el tamaño de la fuente y el subrayado.
¿Cuáles son algunas buenas prácticas al usar Tailwind con Angular?
Integrar Tailwind con Angular no solo mejora el flujo de trabajo, sino que también abre puertas a mejores prácticas en desarrollo web.
Uso de extensiones: Instalamos la extensión de Tailwind en nuestro editor para traducciones automáticas de clases a CSS, lo que facilita entender qué estamos aplicando visualmente.
Experiencia del desarrollador: Tailwind permite una experiencia más directa al manejar clases y estilos directo en el código HTML, fomentando un desarrollo limpio y centrado.
Consistencia en estilos: Al utilizar estas herramientas, mantenemos la consistencia de los estilos y la UI, reduciendo el tiempo de mantenimiento y mejoras en el futuro.
Con todo esto, no solo hemos aprendido a comenzar un proyecto con Angular sino también a integrarlo eficientemente con Tailwind CSS, aprovechando lo mejor de ambos mundos para construir una tienda en línea dinámica, moderna y bien estilizada. ¡Continúa explorando y desarrollando tus habilidades en tecnologías web!
Dejo la guía que yo seguí y funciono sin problema:
⬆️Funciona con esta guía y Angular v19. ¡Gracias!
Efectivamente, esta es la voz, la fija.
a mi no me reconoce:
@tailwind base;
@tailwind components;
@tailwind utilities; y no pude avanzar en la clase. segui cada paso.
:(
Eso si es raro, si puedes compartir el error, seria genial.
sale asi pero cuando compilas si funciona ,ignoralo nomas xd
No me pregunta si quiero routing y directamente me pasa a elegir el css ¡por que puede ser? Lo que si me pregunto es si habilito el SSR (puse que no)
Si tienes razón ya no lo pregunta en las últimas versiones del CLI ya por defecto siempre te inicia con una app que tiene routing incluido y tiene total sentido en mi opinión.
Para seguir el con el curso, debes usar la versión 3 de Tailwind, aquí el enlace directo a la instalación en Angular:
Y si no te funciona, puedes agregar lo siguiente en tu .prettierrc
{"plugins":["prettier-plugin-tailwindcss"]}
📍Stack moderno y productivo
Me llevo que combinar Angular + Tailwind CSS permite construir aplicaciones complejas (como una tienda online) con una arquitectura sólida y una maquetación extremadamente rápida, sin perder orden ni escalabilidad.
📍Beneficios reales de Tailwind en proyectos grandes
Me llevo que Tailwind mejora notablemente la experiencia del desarrollador, mantiene la consistencia visual y reduce el mantenimiento futuro, especialmente en aplicaciones grandes como e-commerce.
Me aparece que si quiero crear SSR?
Para este caso no es necesario
¿Por qué al ejecutar el siguiente comando npm install -D prettier prettier-plugin-tailwindcss, se genera el siguiente error 4 moderate severity vulnerabilities?
El error se genera porque al instalar las dependencias 'prettier' y 'prettier-plugin-tailwindcss' se detectan 4 vulnerabilidades de severidad moderada en las dependencias de esos paquetes.
Me llevo la importancia de validar rápido la integración usando un ejemplo simple (como un <h1> con clases Tailwind) antes de avanzar con lógica compleja o consumo de APIs.
📍Integración limpia de Tailwind en Angular
Me llevo que integrar Tailwind en Angular es un proceso directo y bien documentado, y que configurar correctamente los paths en tailwind.config.js es clave para que las clases se apliquen sin problemas.
📍Arranque optimizado del proyecto
Me llevo que iniciar el proyecto como Standalone, con routing y sin tests iniciales (--skip-tests), acelera el setup y es ideal para proyectos donde primero se quiere validar funcionalidad y UI.
A mi me sale este error, alguna idea de como solucionarlo?
te dejo una guia de como convertir una aplicación a stand alone en versiones inferiores a angular 16
Hice todos los pasos y no funciona Tailwind. Puede ser que no funcione con scss?
La compatibilidad entre versiones de Angular y Tailwind es crucial. Si una versión de Tailwind no funciona correctamente con tu versión de Angular, retroceder a una versión anterior puede ser una buena solución. Asegúrate de verificar la documentación de ambas herramientas para identificar qué versiones son compatibles. También es recomendable que revises las dependencias y configuraciones en tu archivo package.json y el archivo de configuración de Tailwind (tailwind.config.js) para evitar problemas de integración.
La página de la documentación de tailwind es:
✅
Ayer hice todos los pasos de instalacion e iniciaizacion de tailwind, si soo quiero abrir el https qe comando debo ejecutar, ya que pongo ng serve y me arroja error, pero tampoco creo que deba repetir todos los pasos desde 0?
Para abrir el proyecto con HTTPS puedes intentar usar el comando 'ng serve --ssl true'. Si ng serve te arroja error, verifica la configuración o los logs del error para resolverlo.
