跳至主要内容

🤖 Install Tailwind Css with ASP.NET MVC5

mdImg

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

一.先前準備

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

mdImg

  • 開啟資料夾位置

mdImg

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

mdImg mdImg

二.導入 tailwindcss

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

mdImg

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

mdImg

  • 將附檔 public.zip 解壓縮並複製到 jit_init 資料夾 public.zip (點我下載)

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

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

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

mdImg

三.啟動 tailwindcss-cli

  • 於主控台輸入npm install

    mdImg

  • 於主控台輸入npm run jit mdImg

四.MVC 專案設定

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

mdImg

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

    mdImg

  • 將 app.css 加入專案

    mdImg

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

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

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

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

兔兔傳送門 (點我來去找兔兔)