今天是鐵人賽最後一天，
我們來點不一樣的，
就是Tailwind Css啦

一.先前準備

• 建立新資料夾
• 將資料夾命名為jit_init

• 開啟資料夾位置

• 於路徑輸入CMD，並按下Enter

二.導入tailwindcss

• 於主控台輸入 npx tailwindcss-cli init --jit
• 成功之後會在jit_init資料夾看到tailwind.config.js檔案

• 將附檔package.json複製到jit_init資料夾
• 輸入npm install tailwindcss autoprefixer postcss postcss-cli
• 成功之後會在jit_init資料夾看到node_modules目錄以及package-lock.json檔案
• package.json

• 將附檔public.zip解壓縮並複製到jit_init資料夾
  public.zip

• 開啟package.json修改css輸出路徑
  

• 開啟tailwind.config.js修改purge(tailwindcss作用範圍)

• MVC為例('../Views/**/*.cshtml')

三.啟動tailwindcss-cli

• 於主控台輸入npm install
  

• 於主控台輸入npm run jit
  

四.MVC專案設定

• 將app.css引用到_Layout.cshtml
• <link href="~/Content/app.css" rel="stylesheet">

• 於方案總管點選顯示所有檔案
  

• 將app.css加入專案
  

注意:每次重新開啟專案時，皆需執行npm run jit 指令

• 這樣編輯CSS時，才有辦法做更新
  

最後最後，我們謝謝兔兔當時花很多時間在幫我校這份稿

如果大家對Tailwind Css不熟，但很想入門，歡迎去看他的文章

兔兔傳送門