設置專案
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 應該更有感，之後可以再觀察看看囉。
