Instalar Tailwind CSS con Angular

Configuración de Tailwind CSS en un proyecto Angular.

Comienza creando un nuevo proyecto Angular si aún no tienes uno configurado. El enfoque más común es utilizar Angular CLI.

Terminal

ng new my-project --style csscd my-project

Instala @tailwindcss/postcss y sus dependencias directas a través de npm.

Terminal

npm install tailwindcss @tailwindcss/postcss postcss --force

Crea un archivo .postcssrc.json en la raíz de tu proyecto y añade el plugin @tailwindcss/postcss a tu configuración de PostCSS.

.postcssrc.json

{  "plugins": {    "@tailwindcss/postcss": {}  }}

Añade un @import a ./src/styles.css que importe Tailwind CSS.

styles.css

@import "tailwindcss";

Ejecuta tu proceso de compilación con ng serve.

Terminal

ng serve

Comienza a usar las clases de utilidad de Tailwind para dar estilo a tu contenido.

app.component.html

<h1 class="text-3xl font-bold underline">  Hello world!</h1>