DEV Community: Adrián UB

Como desplegar NestJS en Deta.sh 🚀

Adrián UB — Sun, 27 Feb 2022 00:00:00 +0000

¿Que es Deta.sh?

Deta es una nube gratuita diseñada pensando en la experiencia del desarrollador y del usuario, nos ayuda crear implementaciones de nuestras ideas en la nube más amigable con los desarrolladores, es totalmente gratuita y para siempre.

En esta podemos desplegar aplicaciones hecha con NodeJs y Python, donde nos proveen un Micro por cada aplicación desplegada.

Creación del proyecto NestJS

Para comenzar a crear nuestro clonaremos el starter de NestJS

git clone https://github.com/nestjs/typescript-starter

Instalamos las dependencias y vemos que nuestro proyecto corra sin ningun error.

Configurar proyecto

Primero crearemos nuestro punto de entrada en src/index.ts:

import { NestFactory } from '@nestjs/core';
import { ExpressAdapter } from '@nestjs/platform-express';
import { AppModule } from './app.module';

const createNestServer = async (expressInstance) => {
  const app = await NestFactory.create(
    AppModule,
    new ExpressAdapter(expressInstance),
  );

  return app.init();
};

export default createNestServer;

Crearemos un archivo llamado index.js en el root de nuestra aplicación:

const express = require('express');
const createServer = require('./dist/index').default;

const app = express();
let nest;

app.use(async (req, res) => {
  if (!nest) {
    nest = express();
    await createServer(nest);
  }
  return nest(req, res);
});

module.exports = app;

Desplegar proyecto

Para poder desplegar nuestra aplicación necesitamos correr los siguientes comandos.

Compilar

Escribe el siguiente comando en la terminal para compilar tu proyecto:

yarn build

Iniciar sesión en Deta

Para iniciar sesión en Deta necesitamos correr el siguiente comando:

deta login

Crear un Micro

Creamos un nuevo micro desde una carpeta anterior a nuestro proyecto:

deta new --node nombre-del-proyecto

Deploy 🚀

Y por ultimo desplegamos el proyecto ejecutando el siguiente comando en el root de la aplicación:

deta deploy

Luego puedes visitar la url creada por Deta y sacar provecho

Ejemplo: https://7dug2x.deta.dev/

adrian-ub / nest-deta

Template for blog post https://adrianub.dev/blog/desplegar-nestjs-en-detash

Description

Nest framework TypeScript starter repository.

Installation

$ yarn

Running the app

# development
$ yarn start

# watch mode
$ yarn run start:dev

# production mode
$ yarn run start:prod

Test

# unit tests
$ yarn run test

# e2e tests
$ yarn run test:e2e

# test coverage
$ yarn run test:cov

Build and Deploy

These steps assume you already have added Deta Micros to your Project.

https://deta.sh

https://docs.deta.sh/docs/micros/getting_started

# build
$ yarn build

# deploy
$ deta deploy

License

This Project is MIT licensed.
Please review the License of NestJS which this example is based on.
Based on nestjs/typescript-starter

View on GitHub

Refactorización: Guard Clauses

Adrián UB — Fri, 01 Oct 2021 18:34:34 +0000

Es probable que en algún momento de su carrera de programación haya escrito declaraciones lógicas condicionales masivas con muchos niveles de declaraciones if y else if anidadas. Al principio puede parecer una gran idea, ya que encaja perfectamente con la lógica que está tratando de hacer cumplir, pero luego pasa un mes y necesita hacer cambios en ese bloque condicional masivo. Lo más probable es que le haya llevado mucho tiempo analizar y comprender la lógica condicional, ya que estaba llena de múltiples niveles de anidamiento y sus nuevos cambios probablemente eran muy propensos a errores. Puede parecer que no hay forma de evitar este problema, pero ahí es donde entran en juego las cláusulas de protección.

Los principales problemas que aparecen en el código en el que no se aplica la técnica de las cláusulas de protección son los siguientes:

Indentación excesiva — el uso excesivo de la estructura de control si está anidada significa que hay un alto nivel de indentación que dificulta la lectura del código.
Relación entre if-else — cuando hay una gran cantidad de fragmentos de código separados entre if-else, que están conceptualmente relacionados entre sí, es necesario realizar la lectura del código saltando entre las diferentes partes.
Esfuerzo mental — una consecuencia de los diferentes saltos en el código fuente provoca que se genere un esfuerzo extra en la generación de código.

Aplicaciones prácticas

La aplicación práctica de una cláusula de guarda es el siguiente caso:

function doSomething() {
  if (everythingIsGood()) {
    /**
     * ¡¡¡Mucho código aquí !!!
     */
    return SOME_VALUE;
  } else {
    return ANOTHER_VALUE; // un caso especial
  }
}

En este caso, y la mayoría de las veces, debe invertir la lógica para evitar usar la palabra reservada else. El código anterior se reescribiría de la siguiente manera:

function doSomething() {
  if (!everythingIsGood()) {
    // esta es su cláusula de protección
    return ANOTHER_VALUE;
  }

  /**
   * ¡¡¡Mucho código aquí !!!
   */
  return SOME_VALUE;
}

Por tanto, los casos particulares que provoquen una salida del método se colocarían al inicio del método y actuarían como guardas de forma que se evite continuar por el flujo satisfactorio del método.

De esta forma, el método es de fácil lectura ya que los casos particulares se encuentran al inicio del mismo y el caso de uso de flujo satisfactorio es el cuerpo del método.

Echemos un vistazo a un ejemplo un poco más complejo sobre el cálculo de los deducibles del seguro.

function getInsuranceDeductible(insurance) {
  if (insurance.covered) {
    if (insurance.majorRepair) {
      return 500;
    } else if (insurance.mediumRepair) {
      return 300;
    } else {
      return 100;
    }
  } else {
    return 0;
  }
}

Esta es una función muy simple, pero la lógica anidada if/else if es difícil de seguir a primera vista. Para limpiar esto, podemos usar nuevamente cláusulas de protección.

function getInsuranceDeductible(insurance) {
  if (!insurance.covered) return 0;
  if (insurance.majorRepair) return 500;
  if (insurance.mediumRepair) return 300;

  return 100;
}

Esta función es mucho más corta que la función anterior y mucho más fácil de entender, ya que toda la lógica es autónoma y no está anidada entre sí.

Imagina que tienes que crear un método que calcule el costo del seguro médico en el que se recibe el ID de usuario como parámetro.

Se realiza una búsqueda en una base de datos utilizando este ID para recuperar un usuario. Si el usuario no existe, se lanzará una excepción llamada UserNotFoundException. Si el usuario existe en el sistema, el siguiente paso es verificar que el seguro médico del usuario corresponda a alguno de los que son válidos para este algoritmo: Allianz o AXA. Si el seguro no es válido, se debe devolver una excepción llamada UserInsuranceNotFoundException. Finalmente, este algoritmo solo es válido para usuarios que sean de nacionalidad colombiana. Por lo tanto, debe verificar nuevamente si el usuario es colombiano para realizar el cálculo del seguro o devolver una excepción llamada UserIsNotColombianException.

function calculateInsurance(userId: number) {
  const user = myDb.findOne(userId);

  if (user) {
    if (user.insurance === 'Allianz' || user.insurance === 'AXA') {
      if (user.nationality === 'Colombian') {
        const value = any;
        /**
         * Algoritmo complejo
         */
        return value;
      } else {
        throw new UserIsNotColombianException(user);
      }
    } else {
      throw new UserInsuranceNotFoundException(user);
    }
  } else {
    throw new UserNotFoundException('User NotFound');
  }
}

Como puede ver, el código tiene muchos niveles de indentación. A continuación se muestra la misma versión del algoritmo anterior, pero se ha aplicado la técnica de las cláusulas de protección. Esta técnica permite que el código sea más legible. Tenga en cuenta que se han aplicado tres cláusulas de protección que permiten generar rutas alternativas (lanzar excepciones) que no interfieren en el resultado del algoritmo.

function calculateInsurance(userId: number) {
  const user = myDb.findOne(userId);

  if (!user) {
    throw new UserNotFoundException('User NotFound');
  }

  if (!(user.insurance === 'Allianz' || user.insurance === 'AXA')) {
    throw new UserInsuranceNotFoundException(user);
  }

  if (user.nationality !== 'Colombian') {
    throw new UserIsNotColombianException(user);
  }

  const value = any;
  /**
   * Algoritmo complejo
   */
  return value;
}

Algunas cuestiones que deben resolverse:

¿Por qué no hay casos de if-else if?

¡Deja de pensar! Si su código requiere casos como el else if, es porque está incumpliendo el Principio de Responsabilidad Única y el código toma decisiones de nivel superior, que deben refactorizarse.

Las condiciones negativas no se comprenden bien.

Para ello contamos con otra técnica de refactorización llamada método extract, que consiste en extraer código en funciones para su reutilización o comprensión lectora. En el siguiente ejemplo, modificamos el ejemplo anterior para crear métodos que permitan una mejor lectura y comprensión del código.

En el uso de una cláusula de protección, la lógica de las condiciones normalmente se invierte y, dependiendo de la complejidad de la condición, es bastante complejo entender qué se está evaluando en esa condición.

Por eso es una buena práctica extraer la lógica de las condiciones en pequeñas funciones que permitan una mayor legibilidad del código (y, por supuesto, encontrar errores en ellas) ya que la responsabilidad de evaluar la condición se está delegando a una función específica.

Para nuestro ejemplo de seguro médico podemos generar los siguientes métodos:

function isValidInsurance({ insurance }: User): boolean {
  return insurance === 'Allianz' || insurance === 'AXA';
}

function isColombian({ nationality }: User): boolean {
  return nationality === 'Colombian';
}

No es necesario crear una función para comprobar si el usuario existe, ya que basta con comprobar que el usuario es diferente de nulo o indefinido. Por tanto, el código resultante sería el siguiente:

function calculateInsurance(userId: number) {
  const user = myDb.findOne(userId);

  if (!user) {
    throw new UserNotFoundException('User NotFound');
  }

  if (!isValidInsurance(user)) {
    throw new UserInsuranceNotFoundException(user);
  }

  if (!isColombian(user)) {
    throw new UserIsNotColombianException(user);
  }

  const value = any;
  /**
   * Algoritmo complejo
   */
  return value;
}

Resumen

Existen muchas prácticas para mejorar la calidad del código. Lo más importante que hay que aprender a la hora de aplicar técnicas de refactorización es que deben centrarse en dos puntos, principalmente:

Desacoplar el código — esto permite pequeños cambios que no causan grandes cambios encadenados en todo el proyecto de software.
Legibilidad — es muy importante que los desarrolladores comprendan que la mayor parte del tiempo de su trabajo se basa en la lectura de código y, probablemente, en código escrito por otro desarrollador. Es muy beneficioso en costo/desarrollo que un desarrollador no pierda tiempo entendiendo la lógica elemental porque no es fácil de leer.

La refactorización comienza desde el punto más elemental, un simple if, hasta un patrón de arquitectura. Es importante cuidar todos los aspectos de nuestro desarrollo de software.

Crear controles de formulario personalizados usando ControlValueAccessor en Angular

Adrián UB — Sun, 12 Sep 2021 19:12:40 +0000

¿Cómo crear controles de formulario personalizados en Angular usando ControlValueAccessor? Podemos crear componentes de formulario personalizados y conectarlos a formularios basados en plantillas o formularios reactivos.

Entonces, cuando digo controles de formulario personalizados, me refiero a aquellos elementos que no son sus controles típicos, como inputs, radio buttons o checkboxes. Por ejemplo, un componente de clasificación con estrellas. Estos no están disponibles de fábrica.

También podemos crear secciones en un formulario como componentes secundarios que luego se pueden usar como controles de formulario personalizados. De esta manera, las formas más grandes se pueden dividir en partes manejables.

Elementos de formulario personalizados

Cuando escuchemos el término formulario, estaríamos pensando en inputs y tal vez en algunos checkboxes, etc. Pero cuando se trata de formularios realmente grandes en los que tenemos muchos botones, listas y selecciones personalizados, todo el formulario se volverá muy complejo y manejar esto sería un problema.

Cuando hay muchos elementos de formulario personalizados o cuando el formulario comienza a crecer, probablemente sea una buena idea dividirlo en secciones más pequeñas. Colocar todo en una sola plantilla lo haría realmente complicado.

Control de formulario personalizado en Angular

ControlValueAccessor es una interfaz incluida en Angular. Actúa como un puente entre los elementos DOM y la API de forma angular.

Entonces, si tiene un elemento personalizado que le gustaría conectar a su formulario, debe hacer uso de ControlValueAccessor para que el elemento sea compatible con la API de Angular Forms. Hacerlo permitirá que el elemento se conecte usando ngModel (Formularios controlados por plantillas) o formControl (Formularios reactivos).

Echemos un vistazo a cómo creamos un control de formulario personalizado

Cuando comencé con Angular, no sabía que existía algo como esto. Recuerdo cuando escribí componentes secundarios para formularios y usé @Input() y @Output() para recibir y enviar valores de formulario al componente de formulario principal. Solía escuchar los cambios en el componente hijo y luego emitir los valores al padre.

En el padre, los valores se tomarán y usarán para parchear el formulario. Esto fue hasta que me encontré con el ControlValueAccessor. No más inputs y outputs, todo simplemente funciona.

Paso 1: configuración del proyecto

Primero, cree un nuevo RatingInputComponent. Esto se puede lograr con @angular/cli:

ng generate component rating-input --inline-template --inline-style

Esto agregará el nuevo componente a las declarations de la aplicación y producirá un archivo rating-input.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-rating-input',
  template: ` <p>rating-input works!</p> `,
  styles: [],
})
export class RatingInputComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}
}

Agregamos la plantilla, los estilos y la lógica:

import { Component } from '@angular/core';

@Component({
  selector: 'app-rating-input',
  template: `
    <ng-container *ngFor="let starred of stars; let i = index">
      <span (click)="rate(i + (starred ? (value > i + 1 ? 1 : 0) : 1))">
        <ng-container *ngIf="starred; else noStar">⭐</ng-container>
        <ng-template #noStar>·</ng-template>
      </span>
    </ng-container>
  `,
  styles: [
    `
      span {
        display: inline-block;
        width: 25px;
        line-height: 25px;
        text-align: center;
        cursor: pointer;
      }
    `,
  ],
})
export class RatingInputComponent {
  stars: boolean[] = Array(5).fill(false);

  get value(): number {
    return this.stars.reduce((total, starred) => {
      return total + (starred ? 1 : 0);
    }, 0);
  }

  rate(rating: number) {
    this.stars = this.stars.map((_, i) => rating > i);
  }
}

Podemos obtener el value del componente (0 a 5) y establecer el valor del componente llamando a la función de rate o haciendo clic en el número de estrellas deseado.

Puede agregar el componente a la aplicación: src/app/app.component.html

<app-rating-input></app-rating-input>

Y ejecute la aplicación:

ng serve

Esto es genial, pero no podemos simplemente agregar esta entrada a un formulario y esperar que todo funcione. Necesitamos convertirlo en un ControlValueAccessor.

Implemente la interface ControlValueAccessor

Implemente la interfaz en el componente personalizado. La interfaz nos pediría que agreguemos algunos métodos en nuestra clase.

interface ControlValueAccessor {
  writeValue(obj: any): void
  registerOnChange(fn: any): void
  registerOnTouched(fn: any): void
  setDisabledState(isDisabled: boolean)?: void
}

Veamos qué está haciendo cada uno de los métodos. Una vez que tengamos claro cómo están las cosas, podemos sumergirnos en la implementación.

writeValue() - la API de formularios llama a esta función para actualizar el valor del elemento. Cuando el valor de ngModel o formControl cambia, se llama a esta función y se pasa el último valor como argumento de la función. Podemos utilizar el último valor y realizar cambios en el componente. (referencia)
registerOnChange() - obtenemos acceso a una función en el argumento que se puede guardar en una variable local. Entonces esta función se puede llamar cuando hay algún cambio en el valor de nuestro control de formulario personalizado. (referencia)
registerOnTouched() - obtenemos acceso a otra función que se puede utilizar para actualizar el estado del formulario ha sido tocado (touched). Entonces, cuando el usuario interactúa con nuestro elemento de formulario personalizado, podemos llamar a la función guardada para que Angular sepa que se ha interactuado con el elemento. (referencia)
setDisabledState() - esta función será llamada por la API de formularios cuando se cambie el estado deshabilitado (disabled). Podemos obtener el estado actual y actualizar el estado del control de formulario personalizado. (referencia)

Una vez que implementamos estas funciones, el siguiente paso es proporcionar el token NG_VALUE_ACCESSOR en la matriz de proveedores del componente así:

const CONTROL_VALUE_ACCESSOR: Provider = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => RatingInputComponent),
  multi: true,
};

@Component({
  selector: 'app-rating-input',
  template: ` <p>rating-input works!</p> `,
  providers: [CONTROL_VALUE_ACCESSOR], // <-- agregar aquí
})
export class RatingInputComponent implements ControlValueAccessor {}

Nota: Aquí creé una constante de proveedor y luego la pasé a los providers. También puede ver el uso de forwardRef aquí (referencia). Es necesario porque nos referimos a la clase RatingInputComponent que no está definida antes de su referencia.

Entonces, ahora que sabemos lo que hace cada una de estas funciones, podemos comenzar a implementar nuestro elemento de formulario personalizado.

Volvamos a rating-input.component.ts en el editor de código y realicemos los siguientes cambios:

import { Component, forwardRef, HostBinding, Input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

const CONTROL_VALUE_ACCESSOR: Provider = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => RatingInputComponent),
  multi: true,
};

@Component({
  selector: 'app-rating-input',
  template: `
    <ng-container *ngFor="let starred of stars; let i = index">
      <span
        (click)="onTouched(); rate(i + (starred ? (value > i + 1 ? 1 : 0) : 1))"
      >
        <ng-container *ngIf="starred; else noStar">⭐</ng-container>
        <ng-template #noStar>·</ng-template>
      </span>
    </ng-container>
  `,
  styles: [
    `
      span {
        display: inline-block;
        width: 25px;
        line-height: 25px;
        text-align: center;
        cursor: pointer;
      }
    `,
  ],
  providers: [CONTROL_VALUE_ACCESSOR],
})
export class RatingInputComponent implements ControlValueAccessor {
  stars: boolean[] = Array(5).fill(false);

  // Permita que el input esté deshabilitado, y cuando lo esté, hágalo algo transparente.
  @Input() disabled = false;
  @HostBinding('style.opacity')
  get opacity() {
    return this.disabled ? 0.25 : 1;
  }

  // Función para llamar cuando cambia la calificación.
  onChange = (rating: number) => {};

  // Función para llamar cuando se toca el input (cuando se hace clic en una estrella).
  onTouched = () => {};

  get value(): number {
    return this.stars.reduce((total, starred) => {
      return total + (starred ? 1 : 0);
    }, 0);
  }

  rate(rating: number) {
    if (!this.disabled) {
      this.writeValue(rating);
    }
  }

  // Permite que Angular actualice el modelo (rating).
  // Actualice el modelo y los cambios necesarios para la vista aquí.
  writeValue(rating: number): void {
    this.stars = this.stars.map((_, i) => rating > i);
    this.onChange(this.value);
  }

  // Permite a Angular registrar una función para llamar cuando cambia el modelo (rating).
  // Guarde la función como una propiedad para llamar más tarde aquí.
  registerOnChange(fn: (rating: number) => void): void {
    this.onChange = fn;
  }

  // Permite a Angular registrar una función para llamar cuando se ha tocado el input.
  // Guarde la función como una propiedad para llamar más tarde aquí.
  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  // Permite que Angular deshabilite el input.
  setDisabledState(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }
}

Ahora puede desactivar los controles del input, agregar un [(ngModel)] o un formControlName:

<app-rating-input [disabled]="true"></app-rating-input>

<app-rating-input [(ngModel)]="rating"></app-rating-input>

<form [formGroup]="reactiveForm">
  <app-rating-input formControlName="rating"></app-rating-input>
</form>

¡En este punto podemos decir que nuestro RatingInputComponent es un componente de formulario personalizado! Funcionará como cualquier otro input nativo (¡Angular proporciona ControlValueAccessors para esos!) En formas reactivas o basadas en plantillas.

Angular hace que sea realmente fácil implementar el control de formulario personalizado usando ControlValueAccessor. Al implementar algunos métodos, podemos conectar directamente nuestro componente a un formulario reactivo o Template Driven con facilidad.

Podemos escribir todo tipo de elementos de formas asombrosas y usarlos sin escribir lógica para manejar la comunicación entre padres e hijos. Deje que la API de formularios haga la magia por nosotros.

También podemos utilizar este enfoque para dividir secciones del formulario en su propio componente individual. De esta manera, si el formulario es grande/complejo, podemos dividirlo en componentes más pequeños que se pueden administrar fácilmente.

How to add brand colors on TailwindCSS

Adrián UB — Mon, 05 Jul 2021 21:40:19 +0000

ublabs / tailwindcss-brand-colors

Tailwind plugin for adding brands colors.

TailwindCSS Brand Colors

Tailwind plugin for adding brands colors.

Install

npm install @ublabs/tailwindcss-brand-colors

yarn add @ublabs/tailwindcss-brand-colors

Add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    //  for all list
    require('@ublabs/tailwindcss-brand-colors'),
    // select the brands
    require('@ublabs/tailwindcss-brand-colors')(['angular', 'tailwindcss']),
    // ...
  ],
};

See the list of all brand colors available here

How to add a new brand color?

Fork/Clone Repository

git clone https://github.com/YOUR-USERNAME/tailwindcss-brand-colors

Install Dependencies
```
yarn install
```
Select Color

Ex: #111827

Set Brand Color

yarn nx workspace-schematic add-brand --name=<brand-name> --hex=#111827

Credits

Inspired by Simple Icons.

License

The MIT License (MIT). Please see License File for more information.

View on GitHub

Bordes rellenables con TailwindCSS

Adrián UB — Mon, 19 Apr 2021 00:00:00 +0000

Para una mejor visualización, visitar página web.

Iniciemos

En primer lugar, comencemos creando una tarjeta simple:

<div
  class="block max-w-md mx-auto bg-white border border-gray-400 rounded shadow-sm"
  aria-label="View item"
  title="View item"
>
  <div class="flex items-center justify-between p-5">
    <div class="pr-4">
      <h6 class="mb-2 font-semibold leading-5">
        El universo es un lugar bastante grande
      </h6>
      <p class="text-sm text-gray-900">
        Es mucho mejor captar el universo como realmente es que persistir en la
        ilusión, por satisfactorio y reconfortante que sea.
      </p>
    </div>
    <div class="flex items-center justify-center">
      <svg
        class="w-3 text-gray-700 transition-colors duration-300 group-hover:text-indigo-600"
        fill="currentColor"
        viewBox="0 0 12 12"
      >
        <path
          d="M9.707,5.293l-5-5A1,1,0,0,0,3.293,1.707L7.586,6,3.293,10.293a1,1,0,1,0,1.414,1.414l5-5A1,1,0,0,0,9.707,5.293Z"
        ></path>
      </svg>
    </div>
  </div>
</div>

En el siguiente paso, agregaremos los bordes mágicos (verifique el efecto de desplazamiento):

<div
  class="relative block max-w-md mx-auto overflow-hidden bg-white border border-gray-400 rounded shadow-sm group"
  aria-label="View item"
  title="View item"
>
  <div
    class="absolute bottom-0 left-0 w-full h-1 duration-300 origin-left transform scale-x-0 bg-indigo-600 group-hover:scale-x-100"
  ></div>
  <div
    class="absolute bottom-0 left-0 w-1 h-full duration-300 origin-bottom transform scale-y-0 bg-indigo-600 group-hover:scale-y-100"
  ></div>
  <div
    class="absolute top-0 left-0 w-full h-1 duration-300 origin-right transform scale-x-0 bg-indigo-600 group-hover:scale-x-100"
  ></div>
  <div
    class="absolute bottom-0 right-0 w-1 h-full duration-300 origin-top transform scale-y-0 bg-indigo-600 group-hover:scale-y-100"
  ></div>
  <div class="flex items-center justify-between p-5">
    <div class="pr-4">
      <h6 class="mb-2 font-semibold leading-5">
        El universo es un lugar bastante grande
      </h6>
      <p class="text-sm text-gray-900">
        Es mucho mejor captar el universo como realmente es que persistir en la
        ilusión, por satisfactorio y reconfortante que sea.
      </p>
    </div>
    <div class="flex items-center justify-center">
      <svg
        class="w-3 text-gray-700 transition-colors duration-300 group-hover:text-indigo-600"
        fill="currentColor"
        viewBox="0 0 12 12"
      >
        <path
          d="M9.707,5.293l-5-5A1,1,0,0,0,3.293,1.707L7.586,6,3.293,10.293a1,1,0,1,0,1.414,1.414l5-5A1,1,0,0,0,9.707,5.293Z"
        ></path>
      </svg>
    </div>
  </div>
</div>

Observe que hemos agregado 4 DIV absolutos, que se estiran al pasar el mouse. No olvide agregar las clases relative y group al contenedor principal.

Además, necesitaremos agregar la variante de desplazamiento de grupo a la propiedad de escala en nuestra configuración de Tailwind:

module.exports = {
  // ...
  variants: {
    scale: ['responsive', 'hover', 'focus', 'group-hover'],
  },
};

El último paso es hacer que los bordes se vean más delgados. Para lograr esto, agregaremos un pequeño relleno de 1 px al contenedor principal y un fondo blanco al contenido. Como beneficio adicional, también podríamos escalar la carta y aumentar su sombra al pasar el mouse.

<div
  class="relative block max-w-md p-px mx-auto overflow-hidden transition duration-300 transform bg-white border border-gray-400 rounded shadow-sm hover:scale-105 group hover:shadow-xl"
  aria-label="View item"
  title="View item"
>
  <div
    class="absolute bottom-0 left-0 w-full h-1 duration-300 origin-left transform scale-x-0 bg-indigo-600 group-hover:scale-x-100"
  ></div>
  <div
    class="absolute bottom-0 left-0 w-1 h-full duration-300 origin-bottom transform scale-y-0 bg-indigo-600 group-hover:scale-y-100"
  ></div>
  <div
    class="absolute top-0 left-0 w-full h-1 duration-300 origin-right transform scale-x-0 bg-indigo-600 group-hover:scale-x-100"
  ></div>
  <div
    class="absolute bottom-0 right-0 w-1 h-full duration-300 origin-top transform scale-y-0 bg-indigo-600 group-hover:scale-y-100"
  ></div>
  <div
    class="relative flex items-center justify-between p-5 bg-white rounded-sm"
  >
    <div class="pr-4">
      <h6 class="mb-2 font-semibold leading-5">
        El universo es un lugar bastante grande
      </h6>
      <p class="text-sm text-gray-900">
        Es mucho mejor captar el universo como realmente es que persistir en la
        ilusión, por satisfactorio y reconfortante que sea.
      </p>
    </div>
    <div class="flex items-center justify-center">
      <svg
        class="w-3 text-gray-700 transition-colors duration-300 group-hover:text-indigo-600"
        fill="currentColor"
        viewBox="0 0 12 12"
      >
        <path
          d="M9.707,5.293l-5-5A1,1,0,0,0,3.293,1.707L7.586,6,3.293,10.293a1,1,0,1,0,1.414,1.414l5-5A1,1,0,0,0,9.707,5.293Z"
        ></path>
      </svg>
    </div>
  </div>
</div>

¡Y eso es! Toma el código y úsalo en tus increíbles proyectos.

Combinando múltiples flujos Http con RxJS Observables en Angular

Adrián UB — Thu, 15 Apr 2021 00:56:11 +0000

Veamos cómo podemos combinarlos y encadenarlos para fusionar múltiples flujos de datos Http y obtener lo que necesitamos.

Lo primero que debemos entender es que el servicio HttpClient en Angular devuelve Observables fríos. ¿Qué significa "frío"? Según la definición:

Los observables fríos comienzan a ejecutarse tras la suscripción, es decir, la secuencia observable solo comienza a enviar valores a los observadores cuando se llama a Subscribe.

Una mejor práctica, de hecho, es mantener toda la lógica de manipulación del flujo dentro de nuestro servicio y devolver el Observable, que el controlador puede suscribir.

A continuación, se muestra un ejemplo básico de servicio con una llamada Http:

@Injectable()
export class AuthorService {
  constructor(private http: HttpClient) {}

  get(id: number): Observable<any> {
    return this.http.get('/api/authors/' + id);
  }
}

El controlador debe llamar al servicio, así:

@Component({
  selector: 'app-author',
  templateUrl: './author.component.html',
})
export class AuthorComponent implements OnInit {
  constructor(private authorService: AuthorService) {}

  ngOnInit() {
    this.authorService.get(1).subscribe((data: any) => {
      console.log(data);
    });
  }
}

/* Will return:

{
  id: 1,
  first_name: 'Adrián',
  last_name: 'UB'
}

*/

Ok, ahora veamos algo más avanzado.

Combinando Observables en paralelo

Desde la versión 5.5 de RxJs, necesitamos usar la función pipe para combinar Observables. Acepta tantos operadores pipetables como necesitemos, separados por una coma.

Imagine que desea obtener los datos de un autor y sus libros, pero para obtener los libros debe llamar a un punto final diferente, como /authors/1/books. Debe realizar las dos llamadas y combinarlas en una sola respuesta.

Para hacer eso, podemos usar el operador forkJoin de RxJS, que es similar al antiguo $q.all() de Angular 1 y te permite ejecutar dos o más Observables en paralelo:

getAuthorWithBooks(id: number): Observable<any> {
  return forkJoin([
    this.http.get('/api/authors/' + id),
    this.http.get('/api/authors/' + id + '/books')
  ]).pipe(
    map((data: any[]) => {
      let author: any = data[0];
      let books: any[] = data[1];
      return author.books = books;
    })
  );
}

/* Will return:

{
  id: 1,
  first_name: 'Adrián',
  last_name: 'UB'
  books: [{
    id: 10,
    title: 'Awesome book',
    author_id: 1
  },
  ...
  ]
}

*/

Como puede ver en el ejemplo, forkJoin devuelve una matriz con los resultados de los Observables unidos. Podemos componerlos como necesitemos, para devolver solo un objeto.

Combinando Observables en serie

¿Qué pasa si necesitamos, por ejemplo, obtener la información del autor de un libro? Deberíamos obtener los datos del libro primero y, solo cuando los obtengamos, podemos llamar al punto final del autor con la identificación del autor.

En este caso, tendremos que usar el operador switchMap de RxJS, que es similar al operador map de RxJS habitual. La diferencia es que le permite encadenar dos Observables, devolviendo un nuevo Observable:

getBookAuthor(id: number): Observable<any> {
  return this.http.get('/api/books/' + id)
    .pipe(
        switchMap((book: any) => this.http.get('/api/authors/' + book.author_id)
    );
}

/* Will return:

{
  id: 1,
  first_name: 'Adrián',
  last_name: 'UB'
}

*/

En este caso, lo que obtendremos es solo la información del autor. ¿Y si queremos también el objeto libro? Como antes, tenemos que componer nuestros objetos:

getBookWithAuthor(id: number): Observable<any> {
  return this.http.get('/api/books/' + id).pipe(
    switchMap((book: any) => this.http.get('/api/authors/' + book.author_id).pipe(
      map((author: any) => {
        book.author = author;
        return book;
      })
    ))
  );
}

/* Will return:

{
  id: 10,
  title: 'Awesome book',
  author_id: 1
  author: {
    id: 1,
    first_name: 'Adrián',
    last_name: 'UB'
  }
}

*/

Combinando Observables en serie y en paralelo

¿Qué pasa si ahora quisiéramos hacer lo mismo (obtener el libro con su autor), pero para varios libros a la vez? Podemos combinar forkJoin y switchMap:

getBooksWithAuthor(): Observable<any[]> {
  return this.http.get('/api/books/').pipe(
    switchMap((books: any[]) => {
      if (books.length > 0) {
        return forkJoin(
          books.map((book: any) => {
            return this.http.get('/api/authors/' + book.author_id).pipe(
              map((author: any) => {
                book.author = author;
                return book;
              })
            )
          })
        );
      }
      return of([]);
    })
  )
}

/* Will return:

[{
  id: 10,
  title: 'Awesome book',
  author_id: 1
  author: {
    id: 1,
    first_name: 'Adrián',
    last_name: 'UB'
  }
},
{
  id: 11,
  title: 'Another awesome book',
  author_id: 2
  author: {
    id: 2,
    first_name: 'Linneth',
    last_name: 'BS'
  }
}]

*/

Parece complicado, pero es bastante fácil: después de obtener la lista de libros, usamos el switchMap, para fusionar la llamada anterior con el resultado de forkJoin, que se llama solo si tenemos algunos libros, de lo contrario solo devolvemos un Observable que contiene una matriz vacía.

Quizás se esté preguntando por qué estamos usando forkJoin aquí, ya que solo hay una llamada. Pero, si se ve mejor, habrá tantas llamadas como libros recibamos. De hecho, estamos haciendo un bucle en la matriz de libros con la función Array.map, que no es lo mismo que el operador map de RxJS.

Luego, por la llamada de cada autor, combinamos nuestros objetos y devolvemos el libro, que es lo que queremos. ¡Fácil!

Otro ejemplo puede ser obtener información sobre el autor y el editor de un solo libro:

getBookWithDetails(id: number): Observable<any> {
  return this.http.get('/api/books/' + id).pipe(
    switchMap((book: any) => {
      return forkJoin(
        of(book),
        this.http.get('/api/authors/' + book.author_id),
        this.http.get('/api/editors/' + book.editor_id)
      ).pipe(
        map((data: any[]) => {
          let book = data[0];
          let author = data[1];
          let editor = data[2];
          book.author = author;
          book.editor = editor;
          return book;
        })
      );
    })
  );
}

/* Will return:

{
  id: 10,
  title: 'Awesome book',
  author_id: 1,
  editor_id: 42
  author: {
    id: 1,
    first_name: 'Adrián',
    last_name: 'UB'
  },
  editor: {
    id: 42,
    name: 'Universe Editor'
  }
}

*/

Como podemos ver, forkJoin devuelve una matriz con el resultado de cada Observable, que podemos componer para devolver el objeto final. Nótese que estamos uniendo el propio objeto libro, convirtiéndolo en un Observable gracias al operador of RxJS, para que podamos acceder a él en el siguiente map.

¡Espero que el operador RxJS sea más claro ahora! ¡Disfrutar!

How to use Simple Icons on Laravel Blade

Adrián UB — Sun, 11 Apr 2021 17:55:25 +0000

Blade Simple Icons

A package to easily make use of Simple Icons in your Laravel Blade views.

Requirements

PHP 7.4 or higher
Laravel 8.0 or higher

Installation

You can install the package via composer:

composer require ublabs/blade-simple-icons

Usage

Icons can be used as self-closing Blade components which will be compiled to SVG icons:

<x-simpleicon-laravel />

You can also pass classes to your icon components:

<x-simpleicon-laravel class="w-6 h-6 text-red-500"/>

And even use inline styles:

<x-simpleicon-laravel style="color: #FF2D20"/>

Raw SVG Icons

If you want to use the raw SVG icons as assets, you can publish them using:

php artisan vendor:publish --tag=blade-simple-icons --force

Then use them in your views like:

<img src="{{ asset('vendor/blade-simple-icons/laravel.svg') }}" width="10" height="10"/>

ublabs / blade-simple-icons

A package to easily make use of Simple Icons in your Laravel Blade views.

Blade Simple Icons

A package to easily make use of Simple Icons in your Laravel Blade views.

For a full list of available icons see the SVG directory.

Requirements

PHP 7.4 or higher
Laravel 8.0 or higher

Installation

You can install the package via composer:

composer require ublabs/blade-simple-icons

Usage

Icons can be used as self-closing Blade components which will be compiled to SVG icons:

<x-simpleicon-laravel />

You can also pass classes to your icon components:

<x-simpleicon-laravel class="w-6 h-6 text-red-500"/>

And even use inline styles:

<x-simpleicon-laravel style="color: #FF2D20"/>

Raw SVG Icons

If you want to use the raw SVG icons as assets, you can publish them using:

php artisan vendor:publish --tag=blade-simple-icons --force

Then use them in your views like:

<img src="{{ asset('vendor/blade-simple-icons/laravel.svg') }}" width=

…

View on GitHub

How to use Netlify CMS on Vercel

Adrián UB — Fri, 12 Feb 2021 18:58:27 +0000

Hi everyone, today I want to introduce you to a serverless service to use Netlify CMS for sites hosted on Vercel.

What you need to do is modify your config.yml file:

backend:
  name: [github | gitlab]
  repo: adrian-ub/adrian-ub # Path to your Github/Gitlab repository
  branch: main # Branch to update
  base_url: https://netlify-cms.adrianub.vercel.app

You can visit: https://netlify-cms.adrianub.vercel.app

ublabs / netlify-cms-oauth

Use Netlify CMS for sites hosted on Vercel.

Netlify CMS on Vercel

<p dir="auto">
    A simple OAuth2 serverless gateway for Netlify CMS
</p>

Why do I need this?

If you would like to use Netlify CMS to manage your site deployed to Vercel.

GitHub and Gitlab requires a server for authentication and Netlify provides this server only for sites deployed to it. Fortunately, such server is rather small and can work with Vercel's serverless functions.

Usage

In yours projects modify config.yml file:

backend:
  name: [github | gitlab]
  repo: adrian-ub/adrian-ub # Path to your Github/Gitlab repository
  branch: main # Branch to update
  base_url: https://netlify-cms.adrianub.vercel.app

Deploy

Create Github OAuth App:
- Go to developer settings
- Set Authorization callback URL to your deployed oauth website's callback URL https://netlify-cms.adrianub.vercel.app/callback
Create Gitlab OAuth app:
- Go to User settings > Applications
- Set Redirect URI to your deployed oauth website's callback URL: https://netlify-cms.adrianub.vercel.app/callback

Set environment variables on Vercel

OAUTH_GITHUB_CLIENT_ID=<you-client-id>
OAUTH_GITHUB_CLIENT_SECRET=<

…

View on GitHub

Create beautiful looking social images for your Blog and Packages

Adrián UB — Wed, 03 Feb 2021 21:00:11 +0000

Hi everyone, today I want to present a serverless service for image generator. Social Image Generator - Adrián UB

Serverless service that generates dynamic Open Graph images that you can embed in your tags.

What is an Open Graph Image?

Have you ever posted a hyperlink to Twitter, Facebook, or Slack and seen an image popup? How did your social network know how to "unfurl" the URL and get an image? The answer is in your

The Open Graph protocol says you can put a tag in the

of a webpage to define this image.

It looks like the following:

<head>
  <title>Title</title>
  <meta property="og:image" content="http://example.com/logo.jpg" />
</head>

Why use this service?

The short answer is that it would take a long time to painstakingly design an image for every single blog post and every single documentation page. And we don't want the exact same image for every blog post because that wouldn't make the article stand out when it was shared to Twitter.

That's where banners.adrianub.vercel.app comes in. We can simply pass the title of our blog post to our generator service and it will generate the image for us on the fly!

It looks like the following:

<head>
  <title>Hello World</title>
  <meta property="og:image" content="https://banners.adrianub.vercel.app/Hello%20World.png" />
</head>

Now try changing the text Hello%20World to the title of your choosing and watch the magic happen ✨

This service also lets you generate beautiful looking social images for your PHP, Laravel packages, NPM and Yarn. You have already put a lot of time and effort into your package, so why not make it look beautiful using this service.

My repository

adrian-ub / package-banners

Create beautiful looking social images for your Blog and Packages.

Open Graph Image as a Service

Serverless service that generates dynamic Open Graph images that you can embed in your <meta> tags.

For each keystroke, headless chromium is used to render an HTML page and take a screenshot of the result which gets cached.

See the image embedded in the tweet for a real use case.

What is an Open Graph Image?

Have you ever posted a hyperlink to Twitter, Facebook, or Slack and seen an image popup How did your social network know how to "unfurl" the URL and get an image? The answer is in your <head>.

The Open Graph protocol says you can put a <meta> tag in the <head> of a webpage to define this image.

It looks like the following:

<head>
  <title>Title</title>
  <meta property="og:image" content="http://example.com/logo.jpg" />
</head>

…

View on GitHub

Cómo usar TailwindCSS v2 con Laravel 8

Adrián UB — Tue, 12 Jan 2021 02:38:49 +0000

Hola desarrolladores, vamos a ver cómo configurar de manera manual un entorno de desarrollo con Laravel 8 y TailwindCSS 2.

Crear un nuevo proyecto

Siguiendo la documentación de laravel crearemos un nuevo proyecto con composer

composer create-project laravel/laravel laravel-tailwind

Instalar dependencias

Luego de crear nuestro proyecto seguiremos a instalar nuestras dependencias para el desarrollo a través de npm:

npm i -D tailwindcss autoprefixer postcss sass sass-loader

o si está usando yarn cómo administrador de paquetes:

yarn add -D tailwindcss autoprefixer postcss sass sass-loader

Al momento de escribir este artículo las versiones instaladas en las dependencias son las siguientes:

"devDependencies": {
   "autoprefixer": "^10.2.1",
   "laravel-mix": "^6.0.6",
   "postcss": "^8.2.4",
   "sass": "^1.32.2",
   "sass-loader": "^8.0.2",
   "tailwindcss": "^2.0.2"
}

Crea tu archivo de configuración

A continuación, genera tu archivo tailwind.config.js:

npx tailwindcss init

Esto creará un archivo tailwind.config.js mínimo en la raíz de su proyecto:

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Configuremos Tailwind para eliminar los estilos no utilizados en producción:

// tailwind.config.js
- module.exports = {
+ module.exports = (isProd) => ({
-  purge: [],
+  purge: {
+    enabled: isProd,
+    content: [
+       "./app/**/*.php",
+       "./resources/**/*.html",
+       "./resources/**/*.php",
+     ],
+  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
- }
+ })

Configuración para AlpineJs

// tailwind.config.js
- module.exports = {
+ module.exports = (isProd) => ({
-  purge: [],
+  purge: {
+    enabled: isProd,
+    content: [
+       "./app/**/*.php",
+       "./resources/**/*.html",
+       "./resources/**/*.php",
+     ],
+     options: {
+            defaultExtractor: (content) =>
+                content.match(/[\w-/.:]+(?<!:)/g) || [],
+            whitelistPatterns: [/-active$/, /-enter$/, /-leave-to$/, /show$/],
+        },
+  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
- }
+ })

Crear archivo SCSS

Vamos a la ruta resources/sassy creamos un archivo llamado app.scss:

@tailwind base;
@tailwind components;
@tailwind utilities;

Configurar Tailwind con Laravel Mix

En su webpack.mix.js, agregue tailwindcss:

const mix = require("laravel-mix");
const tailwindcss = require("tailwindcss");
const isProd = mix.inProduction();
const tailwindConfig = require("./tailwind.config")(isProd);

mix.js("resources/js/app.js", "public/js/app.js")
    .sass("resources/sass/app.scss", "public/css/app.css")
    .options({
        processCssUrls: false,
        postCss: [tailwindcss(tailwindConfig)],
    })
    .sourceMaps();

if (isProd) {
    mix.version();
}

Ahora solo falta correr el comando:

// Desarrollo
npm run development

// Producción
npm run production

Agregar los estilos a tu aplicación:

<link rel="stylesheet" href="{{ url(mix('css/app.css')) }}">

Y comenzar a probar con TailwindCSS.

Cómo usar Tailwind CSS 2 en Angular 11 🎉🎉

Adrián UB — Tue, 15 Dec 2020 01:38:07 +0000

Tailwind CSS es un marco CSS de utilidad que facilita la creación de sistemas de diseño excepcionales. Se basa en la filosofía de que prácticamente cualquier cosa que pueda hacer con CSS, puede lograrlo directamente agregando un montón de clases de utilidad directamente en su HTML. Angular, por otro lado, es una plataforma que le permite crear aplicaciones empresariales de alta calidad. Combine Angular con Tailwind CSS y tendrá una pila perfecta para crear aplicaciones web de primer nivel.

Tailwind es un complemento de PostCSS, pero desafortunadamente, la CLI de Angular, aunque usa PostCSS bajo el capó para algunas operaciones, no es compatible con los complementos de PostCSS a partir de hoy. Entonces, agregar Tailwind a su aplicación Angular no es tan fácil cómo debería ser.

En este artículo, lo guiaré a través de cómo puede eludir esta limitación y agregar Tailwind CSS a su aplicación Angular.

Crear un nuevo proyecto

Versión de angular al crear esta publicación

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 11.0.4

Comando para crear un nuevo proyecto

ng new angular11-tailwindcss --style=scss

Instalar dependencias

Prosigamos instalando las dependencias requeridas a través de npm:

npm i -D tailwindcss autoprefixer postcss postcss-scss postcss-import postcss-loader

o si está usando Yarn cómo administrador de paquetes:

yarn add -D tailwindcss autoprefixer postcss postcss-scss postcss-import postcss-loader

Ahora necesitamos un paquete para poder crear nuestro webpack.config.js

Nuestro paquete es ngx-build-plus

ng add ngx-build-plus

Configurar Tailwind CSS

Iniciamos el archivo de configuración tailwind.config.js en el proyecto, usando el siguiente comando npx tailwind init y tendremos cómo resultado este código

module.exports = {
  prefix: "",
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

En el archivo styles.scss añadimos las siguientes líneas

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

Configurar Webpack

Creamos un archivo llamado webpack.config.js en la raíz de nuestro proyecto y agregamos las siguientes líneas

module.exports = {
    module: {
      rules: [
        {
          test: /\.scss$/,
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              ident: 'postcss',
              syntax: 'postcss-scss',
              plugins: [
                require('postcss-import'),
                require('tailwindcss'),
                require('autoprefixer'),
              ]
            }
          }
        }
      ]
    }
};

Por último modificaremos nuestro archivo angular.json

{
    ...
    "projects": {
        "angular11-tailwindcss": {
            ...
            "architect": {
                "build": {
                    "builder": "ngx-build-plus:browser",
                    "options": {
+                        "extraWebpackConfig": "webpack.config.js",
                        ...
                    },
                    ...
                },
                "serve": {
                    "builder": "ngx-build-plus:dev-server",
                    "options": {
+                        "extraWebpackConfig": "webpack.config.js",
                        ...
                    },
                    ...
                }
            }
        }
    }
}

Ahora podemos correr nuestro comando ng serve y probar nuestra aplicación

TailwindCSS

Cómo ejemplo agregaremos el código que se encuentra en Tailwind Pay en nuestro archivo src/app/app.component.html

<div class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
  <div class="relative py-3 sm:max-w-xl sm:mx-auto">
    <div class="absolute inset-0 bg-gradient-to-r from-cyan-400 to-light-blue-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl"></div>
    <div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20">
      <div class="max-w-md mx-auto">
        <div>
          <img src="/img/logo.svg" class="h-7 sm:h-8" />
        </div>
        <div class="divide-y divide-gray-200">
          <div class="py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg sm:leading-7">
            <p>An advanced online playground for Tailwind CSS, including support for things like:</p>
            <ul class="list-disc space-y-2">
              <li class="flex items-start">
                <span class="h-6 flex items-center sm:h-7">
                  <svg class="flex-shrink-0 h-5 w-5 text-cyan-500" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                  </svg>
                </span>
                <p class="ml-2">
                  Customizing your
                  <code class="text-sm font-bold text-gray-900">tailwind.config.js</code> file
                </p>
              </li>
              <li class="flex items-start">
                <span class="h-6 flex items-center sm:h-7">
                  <svg class="flex-shrink-0 h-5 w-5 text-cyan-500" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                  </svg>
                </span>
                <p class="ml-2">
                  Extracting classes with
                  <code class="text-sm font-bold text-gray-900">@apply</code>
                </p>
              </li>
              <li class="flex items-start">
                <span class="h-6 flex items-center sm:h-7">
                  <svg class="flex-shrink-0 h-5 w-5 text-cyan-500" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                  </svg>
                </span>
                <p class="ml-2">Code completion with instant preview</p>
              </li>
            </ul>
            <p>Perfect for learning how the framework works, prototyping a new idea, or creating a demo to share online.</p>
          </div>
          <div class="pt-6 text-base leading-6 font-bold sm:text-lg sm:leading-7">
            <p>Want to dig deeper into Tailwind?</p>
            <p>
              <a href="https://tailwindcss.com/docs" class="text-cyan-600 hover:text-cyan-700"> Read the docs &rarr; </a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Repositorio con un ejemplo

adrian-ub / angular11-tailwindcss

Angular 11 TailwindCSS 2

View on GitHub