# Aangular Material & Tailwind v4
本文章將介紹如何在 Angular 專案中整合 Angular Material 與 Tailwind CSS v4。透過這兩者結合，你可以快速打造兼具功能性與美感的 UI，並大幅提升開發效率與維護性。

## Step 1:建立專案
首先用angular Cli建立專案(即有專案可以省略)

ng new angular-project

於專案裡增加material

ng add @angular/material

使用npm安裝tailwindcss跟postcss

npm install tailwindcss @tailwindcss/postcss postcss --save

## Step 2:設定 Tailwind
於==styles.css==裡import ==tailwindcss==

src\styles.css

@import "tailwindcss";

建立 ==.postcssrc.json==檔案並設定postcss

.postcssrc.json

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

啓動angular查看是否能夠正常運作==ng serve --open==

PS:如發生下列錯誤，則是因為@import時無法識別，需要另外設定

▲ [WARNING] All "@import" rules must come first [invalid-@import]

    src/styles.css:5:0:
      5 │ @import "tailwindcss";
	...
	▲ [WARNING] TS-998113: All imports are unused [plugin angular-compiler]

開啓==tsconfig.json==並於==angularCompilerOptions==裡增加==extendedDiagnostics==的設定

tsconfig.json

{
  ...以上省
  "angularCompilerOptions": {
    //加入extendedDiagnostics的設定
    "extendedDiagnostics": {
      "checks": {
        "unusedStandaloneImports": "suppress"
      }
    }
  }
}

## Step 3: 設定sample code
開啓並設定==app.component.ts== 增加==import MatButtonModule==來載入material button

app.component.ts

import {MatButtonModule} from '@angular/material/button';

@Component({
  imports: [MatButtonModule],  //增加import MatButtonModule

})
...其他省略

設定==app.component.html==並增加 Material的calss ==button mat-flat-button==跟Tailwind的class進行測試

app.component.html


<div class="flex flex-col justify-center items-center p-16">
  <button mat-flat-button> Hello World from material button!</button>
  <h1 class="text-3xl underline text-amber-700 mt-10">Hello world from tailwind</h1>
</div>

執行後會產生如下畫面，就代表有讀取到material跟TailwindCss的設定

## 使用注意項目
1.於Material裡不要使用tailwind的class，會沒有作用

<div class="flex flex-col justify-center items-center p-16">
  <!--  this will not work-->
  <button mat-flat-button class="text-3xl underline"> Hello World from material button!</button>
  <h1 class="text-3xl underline text-amber-700 mt-10">Hello world from tailwind</h1>
</div>

2.Material可以使用class來設定style的樣式

<div class="flex flex-col justify-center items-center p-16">
  <!--  this will work-->
  <button mat-flat-button class="material-btn-custom"> Hello World from material button!</button>
  <h1 class="text-3xl underline text-amber-700 mt-10">Hello world from tailwind</h1>
</div>

==material-btn-custom==的樣式設定

.material-btn-custom{
  font-size: 32px;
  text-decoration-line: underline;
}

## 結論
Angular Material 搭配 Tailwind CSS 是一個非常棒的組合，能大幅縮短開發時間，讓你在寫 UI 時事半功倍。

幾個實用建議：
* Material 元件樣式請另外處理：不要直接用 Tailwind 去改 Material 原生元件，建議將樣式獨立管理，這樣更乾淨、也更可控制。

* 結合 Angular 功能與 Tailwind Utility Class：兩者搭配能寫出更有彈性、更強大的程式碼，既保留了 Angular 的架構優勢，又能享受 Tailwind 快速套版的效率。

簡單來說：這種搭配不只提升開發速度，還能在維護性與美觀上都更上層樓！

>參考來源：https://medium.com/@anuroop.suresh/angular-19-scss-angular-material-tailwind-made-easy-6ea8a3927fda