Este curso llego a mi vida en el mejor momento, estaba pensando en iniciar un proyecto en angular usando tailwind
0:00/12:37
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';
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?
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: {},
},
);
Andrés Felipe Peralta Arevalo
A mi no me funcionaba y tuque que cambiarlo a esto
@import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities';
Ricardo Rey
Me paso lo mismo 😊
Elcira Ibarra
Que no se les pase instalar el Angular CDK desde la terminal. Sino después van a tener errores.
ng add @angular/cdk
Gustavo Medina Limon
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: [], }
Luis Daniel Achique Machado
Instalar Tailwind CSS y dependencias
npm install -D tailwindcss postcss autoprefixer
Generar configuración inicial de Tailwind
npx tailwindcss init
Lina Hueso
El comando para quienes no les salió la consola interactiva:
ng new My_New_Project --style=scss
Sergio Castillo
Se ve excelente el curso, gracias Nico
Neo TRAN
No sé si haya un curso o en este mismo se pueda saber, ¿Puedo personalizar los colores que quiero utilizar con tailwind?
Ricardo Arquimedes Castro Quintero
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/
Camilo Grimaldo
tiene que ser obligado SCSS la configuración de los estilos?
Max Andy Diaz Neyra
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: {}, }, );
Max Andy Diaz Neyra
Quedo mal formateado. ojala les sirva, creo que si se entiende
Dave Juanes
Muchas gracias me re salvaste
PiPe Ramirez
Toca ejecutar este comando
npm install -D tailwindcss
Y listo para utilizar tailwindcss.
Espero que le sirva.
Klisman Steven Zapata González
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:
Emilio Ian Camacho Mejía
Quizá ya lo resolviste jaja pero eso pasó porque tú usaste angular 17+
Luis Angel Castillo Vega
Estamos entrando al 2024 y aun es muuy bena info
Alexander Coronell
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" ],
Héctor Salinas
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
Roberto Alejandro Fuster
No se puede realizar la descarga de los archivos de la clase.
David Fernando Rodriguez Delgado
debajo de los videos estn los recursos de la clase , no se si tienes un problema extra para descargarlos
Jhonatan Estiven Becerra Pedrozo
No funciona la instalación de tailwind?
Juan Rossano
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?
César Rotela
Se puede configurar para que sea CSS plano y no SCSS ?
Reinaldo Mendoza
Si, cuando creas un componente te lo pregunta
Winslow Taylor Geldres Oliveros
¿Para poder instalar se puede utilizar cualquier terminal o solo Linux ?
Reinaldo Mendoza
Siempre que tenga acceso a node cualquiera