Cài đặt Tailwind CSS với Angular

Thiết lập Tailwind CSS trong dự án Angular.

Bắt đầu bằng cách tạo một dự án Angular mới nếu bạn chưa thiết lập. Cách phổ biến nhất là sử dụng Angular CLI.

Terminal

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

Cài đặt @tailwindcss/postcss và các peer dependencies thông qua npm.

Terminal

npm install tailwindcss @tailwindcss/postcss postcss --force

Tạo file .postcssrc.json ở thư mục gốc của dự án và thêm plugin @tailwindcss/postcss vào cấu hình PostCSS của bạn.

.postcssrc.json

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

Thêm @import vào ./src/styles.css để import Tailwind CSS.

styles.css

@import "tailwindcss";

Chạy quá trình build với ng serve.

Terminal

ng serve

Bắt đầu sử dụng các utility class của Tailwind để style nội dung của bạn.

app.component.html

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