Instalando Angular CDK y TailwindCSS

Clase 2 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS

Clase anteriorSiguiente clase

Christian Michelle Torres Martínez

student•

Este curso llego a mi vida en el mejor momento, estaba pensando en iniciar un proyecto en angular usando tailwind

Andrés Felipe Peralta Arevalo

student•

A mi no me funcionaba y tuque que cambiarlo a esto

@import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities';

Ricardo Rey

student•

Me paso lo mismo 😊

Elcira Ibarra

student•

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

student•

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

student•

Instalar Tailwind CSS y dependencias

npm install -D tailwindcss postcss autoprefixer

Generar configuración inicial de Tailwind

npx tailwindcss init

Lina Hueso

student•

El comando para quienes no les salió la consola interactiva:

ng new My_New_Project --style=scss

Sergio Castillo

student•

Se ve excelente el curso, gracias Nico

Neo TRAN

student•

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

student•

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

student•

tiene que ser obligado SCSS la configuración de los estilos?

Max Andy Diaz Neyra

student•

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

student•

Quedo mal formateado. ojala les sirva, creo que si se entiende

Dave Juanes

student•

Muchas gracias me re salvaste

PiPe Ramirez

student•

Toca ejecutar este comando

npm install -D tailwindcss

Y listo para utilizar tailwindcss.

Espero que le sirva.

Klisman Steven Zapata González

student•

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

student•

Quizá ya lo resolviste jaja pero eso pasó porque tú usaste angular 17+

Luis Angel Castillo Vega

student•

Estamos entrando al 2024 y aun es muuy bena info

Alexander Coronell

student•

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 Danilo Sebastián Salinas Ugalde

student••

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

student•

No se puede realizar la descarga de los archivos de la clase.

David Fernando Rodriguez Delgado

student•

debajo de los videos estn los recursos de la clase , no se si tienes un problema extra para descargarlos

Jhonatan Estiven Becerra Pedrozo

student•

No funciona la instalación de tailwind?

Juan Rossano

student•

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?

Platzi Team

student•

Se puede configurar para que sea CSS plano y no SCSS ?

Reinaldo Mendoza

student•

Si, cuando creas un componente te lo pregunta

Winslow Taylor Geldres Oliveros

student•

¿Para poder instalar se puede utilizar cualquier terminal o solo Linux ?

Reinaldo Mendoza

student•

Siempre que tenga acceso a node cualquiera

```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: {},
  },
);

Instalando Angular CDK y TailwindCSS

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