# Tailwind 安裝與設定

## 安裝步驟:

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

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

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

#### tailwind.config.js

module.exports = 
  content: [
    "./src/**/*.{html,ts}",
  ],
    ...

最後就在styles.css中引入Tailwind的基礎樣式

#### styles.css

@tailwind base;
@tailwind components;
@tailwind utilities;

當你引入這些樣式後，你會發現vscode會認不出tailwind的標籤而跳出警示
[](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/image-1705050082158.png)

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

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

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

#### settings.json

{
  "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/image-1705050288353.png)

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