0%

Tailwind CSS - 如何在 Angular 中使用 TailwindCSS

TA

安裝說明

建立一個 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

1
2
3
4
5
6
7
8
9
10
11
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
purge: {
enabled: true,
content: ["./src/**/*.html", "./src/**/*.scss"],
},
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};

安裝智能套件 Tailwind CSS IntelliSense

tailwind plugin

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

智能套件故障排除

stylelint

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

CSS Validate

css validate

SCSS Validate

scss

最後在設定檔 setting.json 裡面貼上這一段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
"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 以上喔!

參考資料