2021

TailwindCSS Basic

官方文件: https://tailwindcss.com/docs/installation

Using Tailwind via NPM

1
npm install tailwindcss@latest postcss@latest autoprefixer@latest
1
npx tailwindcss init

./tailwind.config.js

1
2
3
4
5
6
7
8
9
10
11
12
// tailwind.config.js
module.exports = {
  purge: {
    // enabled: true,
    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: {
    // enabled: true,
    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: false, // or 'media' or 'class'
  darkMode: 'class', // or 'media' or '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: {
    // enabled: true,
    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"
},
閱讀全文