---
# System prepended metadata

title: '[Angular] Tailwind 安裝與設定'
tags: [angular, Tailwind, Angular]

---

# Tailwind 安裝與設定

## 安裝步驟:

```java
//安裝tailwindcss
(專案位置)>npm install -D tailwindcss postcss autoprefixer

//生成'tailwind.config.js'檔案
(專案位置)>npx tailwindcss init
```

因為 TailwindCSS 是 Utility-First，就是一大包檔案，為了避免有太多無用的樣式導致專案肥大，所以可以設定什麼檔案才要留樣式，前往tailwind.config.js檔案中，在content矩陣裡加入以下字串:

#### tailwind.config.js
```javascript
module.exports = 
  content: [
    "./src/**/*.{html,ts}",
  ],
    ...
```
最後就在styles.css中引入Tailwind的基礎樣式

#### styles.css
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

當你引入這些樣式後，你會發現vscode會認不出tailwind的標籤而跳出警示
[![](https://bs.systexf680.com/uploads/images/gallery/2024-01/scaled-1680-/image-1705050053778.png)](https://bs.systexf680.com/uploads/images/gallery/2024-01/image-1705050053778.png)

為了避免這個問題，可以去下載[stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)，他是一個智能套件故障排除的套件
[![](https://bs.systexf680.com/uploads/images/gallery/2024-01/scaled-1680-/image-1705050082158.png)](https://bs.systexf680.com/uploads/images/gallery/2024-01/image-1705050082158.png)

下載完成後，在vscode中按下快捷鍵ctrl+Shift+P，輸入Open Workspace Settings，選擇以下圖中的第一個選項，他會帶你前往.vscode資料夾中的settings.json檔案。

[![](https://bs.systexf680.com/uploads/images/gallery/2024-01/scaled-1680-/image-1705050165605.png)](https://bs.systexf680.com/uploads/images/gallery/2024-01/image-1705050165605.png)

你可以在處自訂Stylelint的檢驗設定，為了解決上面所提到的問題，在檔案中加入以下代碼:

#### settings.json

```javascript
{
  "stylelint.config": {
    "rules": {
      "at-rule-no-unknown": [true, {
        "ignoreAtRules": [
          "tailwind",
          "apply",
          "layer",
          "variants",
          "responsive",
          "screen"
        ]
      }],
      "declaration-block-trailing-semicolon": null,
      "no-descending-specificity": null
    }
  },
  "css.validate": false, //加入此行代碼可以解決css因認不出tailwind標籤所跳出警示問題
  "scss.validate": false
}
```

完成以上的步驟之後，基本上你已經可以在專案中的html、ts檔案中使用tailwind所提供的樣式，但為了更快速方便使用，可以去在安裝一個智能套件: [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
[![](https://bs.systexf680.com/uploads/images/gallery/2024-01/scaled-1680-/image-1705050288353.png)](https://bs.systexf680.com/uploads/images/gallery/2024-01/image-1705050288353.png)

下載完以後，就能在你編寫代碼時，看到vscode讓你快速使用tailwind的樣式。
[![](https://bs.systexf680.com/uploads/images/gallery/2024-01/scaled-1680-/image-1705050309618.png)](https://bs.systexf680.com/uploads/images/gallery/2024-01/image-1705050309618.png)