Este curso llego a mi vida en el mejor momento, estaba pensando en iniciar un proyecto en angular usando 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
Aportes 16
Preguntas 9
Este curso llego a mi vida en el mejor momento, estaba pensando en iniciar un proyecto en angular usando tailwind
A mi no me funcionaba y tuque que cambiarlo a esto
@import ‘tailwindcss/base’;
@import ‘tailwindcss/components’;
@import ‘tailwindcss/utilities’;
Para que funcione correctamente se necesita agregar en el archivo styles.scss esto
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
Y agregar en el archivo de tailwind.config.js esto:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
Que no se les pase instalar el Angular CDK desde la terminal.
Sino después van a tener errores.
ng add @angular/cdk
Instalar Tailwind CSS y dependencias
npm install -D tailwindcss postcss autoprefixer
Generar configuración inicial de Tailwind
npx tailwindcss init
El comando para quienes no les salió la consola interactiva:
ng new My_New_Project --style=scss
Se ve excelente el curso, gracias Nico
En mi caso logré hacerlo funcionar agregando los archivos css de Tailwind directamente al angular.json
"styles": [
"node_modules/tailwindcss/base.css",
"node_modules/tailwindcss/components.css",
"node_modules/tailwindcss/utilities.css",
"src/styles.scss"
],
HabÃa abandonado un poco a Platzi porque no encontraba este tipo de contenido. Me encanta como pinta este curso porque este es el framework con el que tengo mayor experiencia y me encanta. Usar Tailwind me parece fabuloso ya que es una herramienta bastante simple pero potente y se usa mucho por la comunidad dev.
en mi caso para poder ver los estilos tuve que cambiar el archivo tailwind.config.js que se genero automáticamente por el que estaba en la documentación oficial, es decir:
Archivo generado automáticamente:
/** @type {import(‘tailwindcss’).Config} */
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
cambiarlo por este:
/** @type {import(‘tailwindcss’).Config} /
module.exports = {
content: [
"./src/**/.{html,ts}",
],
theme: {
extend: {},
},
plugins: [],
}
Si utilizan yarn deben utilizar:
yarn add -D tailwindcss postcss autoprefixer
Y para generar el tailwind.config.js deben utilizar:
yarn tailwindcss init
Muy claras las indicaciones!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?