官方文件: https://tailwindcss.com/docs/installation
Using Tailwind via NPM
1
| npm install tailwindcss@latest postcss@latest autoprefixer@latest
|
./tailwind.config.js
1
2
3
4
5
6
7
8
9
10
11
12
|
module.exports = {
purge: {
content: [
'./src/**/*.html',
'./src/**/*.ts',
'./projects/**/*.html',
'./projects/**/*.ts'
]
},
}
|
其中的purge，要把檢查的html,ts都加入，讓tailwindcss在壓縮時可以檢查。開發時先把enable設為false(預設也是false)，等到發佈產品前再做全面檢測及壓縮，大約可以把tailwind.css從3.7MB壓縮至10KB。
1
2
3
4
5
6
7
8
9
| purge: {
content: [
'./src/**/*.html',
'./src/**/*.ts',
'./projects/**/*.html',
'./projects/**/*.ts'
]
},
|
將tailwind.css建立在 ./src/assets/ 下，才能夠直接被Angular引用
1
| npx tailwindcss-cli@latest build -o ./src/assets/tailwind.css
|
./src/index.html
1
| <link rel="stylesheet" href="assets/tailwind.css">
|
./package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| "scripts": {
"ng": "ng",
"start": "ng serve",
"tw_start": "npm run build_tailwind_dev && ng serve",
"ats": "angular-http-server -p 9000 --path ./dist",
"ls": "cd ./dist && live-server --port=9000 --entry-file=./index.html",
"build": "ng build --prod && npm run build_tailwind_prod",
"build_ls": "npm run build && npm run ls",
"build_deploy": "ng build --prod --deploy-url /static/dist/ && npm run build_tailwind_prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build_tailwind_prod": "npx tailwindcss-cli@latest build ./src/tailwind_src.css -c ./tailwind_pro.config.js -o ./dist/assets/css/tailwind.css",
"build_tailwind_dev": "npx tailwindcss-cli@latest build ./src/tailwind_src.css -c ./tailwind_dev.config.js -o ./src/assets/css/tailwind.css"
},
|
自訂tailwind.config.js
自訂顏色:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| module.exports = {
theme: {
extend: {
colors: {
transparent: 'transparent',
current: 'currentColor',
indigo: {
light: '#211EAD',
DEFAULT: '#21156D',
dark: '#21156D',
},
green: {
light: '#2EC5CE'
}
}
},
}
}
|
開啟DarkMode:
1
2
3
4
5
| module.exports = {
darkMode: 'class',
}
|
1
2
| npx tailwindcss-cli@latest build ./src/tailwind.css -c ./tailwind_pro.config.js -o ./dist/tailw
ind.css
|
使用不同的tailwind_XXX.config.js
在tailwind.config.js之外，我們再建立2個config檔，分別取名為 tailwind_dev.config.js 及 tailwind_pro.config.js ，作為開發版及產品版所使用的config檔。
首先最重要的差異在於要不要啟用 purge 功能，在開發時，我們會使用到新的utility-class，因此若啟用purge功能，會造成開發上的麻煩，很多utility-class都會被清掉而無作用。相對地，在產品版中，我們希望tailwind.css的檔案愈小愈好。
以目前使用到的功能(含暗黑模式)，未壓縮的tailwind.css約為5.7MB，壓縮後的tailwind.css則為14KB，檔案大小相差極巨。
開發版的config: ./tailwind_dev.config.js
1
2
3
4
5
6
7
8
9
10
| module.exports = {
purge: {
content: [
'./src/**/*.html',
'./src/**/*.ts',
'./projects/**/*.html',
'./projects/**/*.ts'
]
},
|
產品版的config: ./tailwind_pro.config.js
1
2
3
4
5
6
7
8
9
10
| module.exports = {
purge: {
enabled: true,
content: [
'./src/**/*.html',
'./src/**/*.ts',
'./projects/**/*.html',
'./projects/**/*.ts'
]
},
|
以上兩者的主要差異在於 enabled: true 這行，若是comment的狀態，則預設是關閉的。
修改package.json腳本
在package.json中，我們新增一個腳本叫做protw，負責編譯產品版的tailwind.css:
1
2
| "protw": "npx tailwindcss-cli@latest build ./src/tailwind_src.css -c ./tailwind_pro.config.js -o ./dist/account-manager/assets/tailwind.css",
|
這段指令是用npx建置dist的tailwind.css的指令。指令分解如下::
1
2
3
4
| 動作: npx tailwindcss-cli@latest build
來源檔: ./src/tailwind_src.css
使用的config: -c ./tailwind_pro.config.js
目的檔: -o ./dist/account-manager/assets/tailwind.css
|
回到package.json中，我們將build腳本加上 && npm run protw :
1
| "build": "ng build && npm run protw",
|
其中的ng build是Angular建置dist版本的指令，而npm run protw是編譯產品版的tailwind.css，這樣就可以用npm run build 同時完成產品版的建置。
回到package.json中，我們新增一個腳本叫做devtw，負責編譯開發版的tailwind.css:
1
| "devtw": "npx tailwindcss-cli@latest build ./src/tailwind_src.css -c ./tailwind.config.js -o ./src/assets/tailwind.css"
|
1
2
3
4
| 動作: npx tailwindcss-cli@latest build
來源檔: ./src/tailwind_src.css
使用的config: -c ./tailwind_dev.config.js
目的檔: -o ./src/assets/tailwind.css
|
修改後的package.json腳本如下:
1
2
3
4
5
6
7
8
9
10
| "scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build && npm run protw",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"protw": "npx tailwindcss-cli@latest build ./src/tailwind_src.css -c ./tailwind_pro.config.js -o ./dist/account-manager/assets/tailwind.css",
"devtw": "npx tailwindcss-cli@latest build ./src/tailwind_src.css -c ./tailwind.config.js -o ./src/assets/tailwind.css"
},
|