有空的話來學一下 Tailwind CSS - Week 1

設置專案

yarn 1.22.10
vite 2.3.7
tailwindcss 2.1.4

yarn create @vitejs/app tailwind-todo
cd tailwind-todo
yarn install
yarn add --dev tailwindcss postcss autoprefixer

--

❯ yarn create @vitejs/app tailwind-todo
yarn create v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.11: The platform "win32" is incompatible with this module.
info "fsevents@1.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "@vitejs/create-app@2.4.2" with binaries:
      - create-app
      - cva
√ Select a framework: » vanilla
√ Select a variant: » vanilla

Scaffolding project in E:\Code\tailwind_learn\tailwind-todo...

Done. Now run:

  cd tailwind-todo
  yarn
  yarn dev

Done in 175.94s.

❯ yarn install
yarn install v1.22.10
warning package.json: No license field
info No lockfile found.
warning No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "win32" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 15.74s.

❯ yarn add --dev tailwindcss postcss autoprefixer
yarn add v1.22.10
warning package.json: No license field
warning No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
warning Pattern ["postcss@^8.3.4"] is trying to unpack in the same destination "D:\\Yarn\\cache\\v6\\npm-postcss-8.3.4-41ece1c43f2f7c74dc7d90144047ce052757b822-integrity\\node_modules\\postcss" as pattern ["postcss@^8.3.0","postcss@^8.1.6","postcss@^8.2.1"]. This could result in non-deterministic behavior, skipping.
info fsevents@2.3.2: The platform "win32" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
warning No license field
success Saved 91 new dependencies.
info Direct dependencies
├─ autoprefixer@10.2.6
├─ postcss@8.3.4
└─ tailwindcss@2.1.4
info All dependencies
...(略)
Done in 20.97s.

First run

❯ yarn dev
yarn run v1.22.10
warning package.json: No license field
$ vite

  vite v2.3.7 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 425ms.

2:34:34 PM [vite] hmr update /style.css

沒有加入 tailwindcss， vite 自動產出的 project 長這樣

修改 style.css

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

結果變這樣

調整 index.html Line 10-11

<!-- <div id="app"></div> -->
<h1 class="text-6xl">Hello Vite + TailwindCSS!</h1>

可以看到 text-6xl 有成功拿到 tailwind 預設的文字樣式

而紅色框便是 tailwindcss 的 style 直接被引入進來。(非常大，約 3~4 MB)

如果直接跑 yarn build 可以看到，非常不理想， vite 還直接用橘色字警告了

index.xxx.css 有 3.15 MB

而 tailwind 在這方面有優化，這時候我們需要創建些設定檔案。

設定檔案

❯ npx tailwindcss init -p

   tailwindcss 2.1.4

   ✅ Created Tailwind config file: tailwind.config.js
   ✅ Created PostCSS config file: postcss.config.js

tailwind.config.js Line 2-3

module.exports = {
  mode: 'jit',
  purge: ['./index.html'],
  ...(略)
}

• purge 選項能在生產環境編譯 css 時，針對陣列裡的檔案所使用到的 css 編譯進最終的 css 檔案。
• mode "jit" 能避免在開發環境中每次都使用一大包的 css，造成開啟 devtools 檢查樣式時很頓的現象。

--
可以看到，在開發環境時載入變快 20 倍，在生產環境編譯出來變成只有 3.13 kb 差了 1000 倍。

目前只是 starter project，在更大的 project 應該更有感，之後可以再觀察看看囉。

Reference

• https://fpjs.fun/vite/tailwind/
• https://blog.techbridge.cc/2020/08/07/vite-and-esmodules-snowpack/
• https://tailwindcss.com/docs/just-in-time-mode