Instalando Angular CDK y TailwindCSS
Clase 2 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS
Contenido del curso
Christian Michelle Torres Martínez
student•
hace 3 años
Clase 2 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS
Contenido del curso
Christian Michelle Torres Martínez
Andrés Felipe Peralta Arevalo
Ricardo Rey
Elcira Ibarra
Gustavo Medina Limon
Luis Daniel Achique Machado
Lina Hueso
Sergio Castillo
Neo TRAN
Ricardo Arquimedes Castro Quintero
Camilo Grimaldo
Max Andy Diaz Neyra
Max Andy Diaz Neyra
Dave Juanes
PiPe Ramirez
Klisman Steven Zapata González
Emilio Ian Camacho Mejía
Luis Angel Castillo Vega
Alexander Coronell
Héctor Danilo Sebastián Salinas Ugalde
Roberto Alejandro Fuster
David Fernando Rodriguez Delgado
Jhonatan Estiven Becerra Pedrozo
Juan Rossano
Platzi Team
Reinaldo Mendoza
Winslow Taylor Geldres Oliveros
Reinaldo Mendoza
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';
Me paso lo mismo 😊
Que no se les pase instalar el Angular CDK desde la terminal. Sino después van a tener errores.
ng add @angular/cdk
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: [], }
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
No sé si haya un curso o en este mismo se pueda saber, ¿Puedo personalizar los colores que quiero utilizar con tailwind?
Hola, aqui en platzi también hay otro curso de tailwind, no sé si te pueda servir con lo que buscas https://platzi.com/cursos/tailwind/
tiene que ser obligado SCSS la configuración de los estilos?
Recomendación para los que vienen de Angular 19:ng add @angular-eslint/schematics - No se desanimen, Angular es retro complatible asi que pueden implementar lo que el profe use o mejor aun adaptarlo al 19 y practican sus conocimientos adquiridos. - Les recomiendo aplicar su eslint y prittier como aprendimos el curso de Angular avanzado: 1) Instalar las herramienas:```js ng add @angular-eslint/schematics npm install prettier -D npm install eslint-config-prettier eslint-plugin-prettier -D
```js { "tabWidth": 2, "useTabs": false, "singleQuote": true, "semi": true, "endOfLine": "auto" } ```3) Modificar el eslint.config.js: (Agregando el eslint-plugin -prettier: ```js // @ts-check const eslint = require("@eslint/js"); const tseslint = require("typescript-eslint"); const angular = require("angular-eslint"); const prettierRecomend = require("eslint-plugin-prettier/recommended"); module.exports = tseslint.config( { files: ["**/*.ts"], extends: [ eslint.configs.recommended, ...tseslint.configs.recommended, ...tseslint.configs.stylistic, ...angular.configs.tsRecommended, prettierRecomend, ], processor: angular.processInlineTemplates, rules: { "@angular-eslint/directive-selector": [ "error", { type: "attribute", prefix: "app", style: "camelCase", }, ], "@angular-eslint/component-selector": [ "error", { type: "element", prefix: "app", style: "kebab-case", }, ], }, }, { files: ["**/*.html"], extends: [ ...angular.configs.templateRecommended, ...angular.configs.templateAccessibility, prettierRecomend, ], rules: {}, }, );
Quedo mal formateado. ojala les sirva, creo que si se entiende
Muchas gracias me re salvaste
Toca ejecutar este comando
npm install -D tailwindcss
Y listo para utilizar tailwindcss.
Espero que le sirva.
Alguien me puede decir porque cuando creo un proyecto en angular no me genera los archivos de app.module.ts y app-routing.module.ts.
generé el proyecto con la instrucción del profe:
ng new trello-clone --routing --style=scss
y esto es lo que me genera:
Quizá ya lo resolviste jaja pero eso pasó porque tú usaste angular 17+
Estamos entrando al 2024 y aun es muuy bena info
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" ],
Siempre es importante verificar la documentación.
Por ejemplo: - Hay algunos cambios en tailwind en el proceso de instalación actualmente - En @angular/cli cuando creas el proyecto ya te permite seleccionar tailwind y te hace el proceso más fácil y rápido
No se puede realizar la descarga de los archivos de la clase.
debajo de los videos estn los recursos de la clase , no se si tienes un problema extra para descargarlos
No funciona la instalación de tailwind?
Cuando se copia el texto a style.scss se remarcan los estilos porque no estan reconocidos ¿por que es esto siendo que tailwind se instalo en el proyecto?
Se puede configurar para que sea CSS plano y no SCSS ?
Si, cuando creas un componente te lo pregunta
¿Para poder instalar se puede utilizar cualquier terminal o solo Linux ?
Siempre que tenga acceso a node cualquiera