Instalar Tailwind CSS con Angular

Configurando 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 usar Angular CLI.

Terminal

ng new my-project --style css
cd my-project

Instala @tailwindcss/postcss y sus dependencias peer 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 build con ng serve.

Terminal

ng serve

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

app.component.html

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