---
# System prepended metadata

title: Aangular Material & Tailwind v4
tags: [Angular, Tailwind, Material]

---

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


## Step 1:建立專案
首先用angular Cli建立專案(即有專案可以省略)
```bash=
ng new angular-project
```

於專案裡增加material
```bash=
ng add @angular/material
```

使用npm安裝tailwindcss跟postcss
```bash=
npm install tailwindcss @tailwindcss/postcss postcss --save
```

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

@import "tailwindcss";

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

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

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

PS:如發生下列錯誤，則是因為@import時無法識別，需要另外設定
```bash=
▲ [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==的設定
```jsonld=
tsconfig.json

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



## Step 3: 設定sample code 
開啓並設定==app.component.ts== 增加==import MatButtonModule==來載入material button 
```typescript=
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進行測試
```htmlembedded=
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的設定
![image](https://hackmd.io/_uploads/HJQUgOnbxg.png)

## 使用注意項目
1.於Material裡不要使用tailwind的class，會沒有作用
```htmlembedded=
<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的樣式
```htmlembedded=
<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==的樣式設定
```css=
.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