Tailwind CSS - 如何在 Angular 中使用 TailwindCSS

安裝說明

安裝環境

Angualr 11.2.6
node.js v14.17.0

建立一個 Angular CLI

可以參考這一篇 Angular 筆記 - Angular CLI 安裝與基本認識，這裡就不在說明。

安裝 TailwindCSS

輸入指令就會自動安裝 TailwindCSS 最新版本，PostCSS 以及 autoprefixer，詳細說明可以看此篇或中文版官方文件。

1	npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

產生 TailwindCSS 配置檔

輸入指令：

1	npx tailwindcss init

安裝完成就會看到跟目錄有一個 tailwind.config.js 的設定檔案，點開內容如下：

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

引入基礎樣式

CSS

如果是用 CSS 格式，引入的話要這樣，並且每次都要編譯。

1
2
3

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

編譯指令：

1	npx tailwindcss build style.css -o tailwind.css

SCSS

如果是 SCSS 的話，引入要用 @import，因為有裝 PostCSS 所以不用每次都編譯。

1
2
3

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

移除不必要的樣式

因為 TailwindCSS 是 Utility-First，就是一大包檔案，為了避免有太多無用的樣式導致專案肥大，所以可以設定什麼檔案才要留樣式，像是 Angular 設定大概就是 .html 跟 .scss 以及 .ts 檔案了，在 purge 中設定如下：

tailwind.config.js

module.exports = {
  purge: {
    enabled: true,
    content: ["./src/**/*.html", "./src/**/*.scss"],
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

安裝智能套件 Tailwind CSS IntelliSense

一定要安裝智能套件，套件傳送門，使用說明可參照這裡。

智能套件故障排除

要安裝 stylelint 智能套件故障排除的套件，因為 VSCode 看不懂 @tailwindcss 的標籤，並且要取消工作區的 CSS 與 SCSS Validate 的設定。

CSS Validate

SCSS Validate

最後在設定檔 setting.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,
  "scss.validate": false
}

做一張簡單的圖文介紹卡片

在 Angular 使用 TailwindCSS JIT 模式

從 Angular12 有完整支援 TailwindCSS JIT 模式，所以專案若沒有向下兼容的需要，建議可以升級到 v.12 以上喔！

提姆寫程式