Instalando Angular CDK y TailwindCSS

2/24
Recursos

Aportes 16

Preguntas 9

Ordenar por:

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

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

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: ![](https://static.platzi.com/media/user_upload/image-e91a8b2a-5bd2-455a-beaf-5d3796cabd3b.jpg)
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"
 ],
Toca ejecutar este comando npm install -D tailwindcss Y listo para utilizar tailwindcss. Espero que le sirva.
![](https://static.platzi.com/media/user_upload/image-717162ce-5723-439c-874e-9296bb39aa83.jpg) Al parecer se instaló EL PAQUETE CDK, solo que marca ese mensaje de NO SUPPORTED, es normal?

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!