使用 Angular 安裝 Tailwind CSS

在 Angular 專案中設定 Tailwind CSS。

如果還沒有設定，請先建立一個新的 Angular 專案。最常見的方法是使用 Angular CLI.

終端機

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

透過 npm 安裝 @tailwindcss/postcss 及其同級相依性。

終端機

npm install tailwindcss @tailwindcss/postcss postcss --force

在專案的根目錄中建立一個 .postcssrc.json 檔案，並將 @tailwindcss/postcss 外掛程式新增到您的 PostCSS 設定中。

.postcssrc.json

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

在 ./src/styles.css 中新增一個 @import，匯入 Tailwind CSS。

styles.css

@import "tailwindcss";

使用 ng serve 執行您的建置流程。

終端機

ng serve

開始使用 Tailwind 的實用類別來設定您的內容樣式。

app.component.html

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