iT邦幫忙

2021 iThome 鐵人賽

DAY 30
3
自我挑戰組

C# 雞礎觀念系列 第 30

[Day30]C# 不雞礎觀念- Install Tailwind Css with ASP.NET MVC5

https://ithelp.ithome.com.tw/upload/images/20210930/20097001lFLnXlnoY5.png

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

一.先前準備

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

https://ithelp.ithome.com.tw/upload/images/20210930/20097001JrGFEfSvst.png

  • 開啟資料夾位置

https://ithelp.ithome.com.tw/upload/images/20210930/20097001r3Xktr4LA5.png

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

https://ithelp.ithome.com.tw/upload/images/20210930/2009700104BcIsTBVZ.png
https://ithelp.ithome.com.tw/upload/images/20210930/20097001XsVYxPv2oh.png

二.導入tailwindcss

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

https://ithelp.ithome.com.tw/upload/images/20210930/20097001zSFbq0QFnZ.png

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

https://ithelp.ithome.com.tw/upload/images/20210930/20097001MPLJKiuB44.png

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

  • 開啟package.json修改css輸出路徑
    https://ithelp.ithome.com.tw/upload/images/20210930/20097001LHLvJCIQQS.png

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

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

https://ithelp.ithome.com.tw/upload/images/20210930/20097001UnxZwZL42u.png

三.啟動tailwindcss-cli

  • 於主控台輸入npm install
    https://ithelp.ithome.com.tw/upload/images/20210930/20097001SgxAYmyaXy.png

  • 於主控台輸入npm run jit
    https://ithelp.ithome.com.tw/upload/images/20210930/20097001UbwmaSsmwc.png

四.MVC專案設定

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

https://ithelp.ithome.com.tw/upload/images/20210930/20097001HauTkJGUnc.png

  • 於方案總管點選顯示所有檔案
    https://ithelp.ithome.com.tw/upload/images/20210930/20097001qtVFJpUf9f.png

  • 將app.css加入專案
    https://ithelp.ithome.com.tw/upload/images/20210930/200970014FtnA0pZSm.png

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

  • 這樣編輯CSS時,才有辦法做更新
    https://ithelp.ithome.com.tw/upload/images/20210930/20097001umMArZ9DoB.png

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

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

兔兔傳送門


上一篇
[Day29]C# 雞礎觀念- 物件導向(oop)~介面(Interface)
下一篇
[Day31]C# 雞礎觀念- 結語
系列文
C# 雞礎觀念32
1
C#.NET
iT邦新手 4 級 ‧ 2021-10-01 00:11:14

恭喜雞完賽!!! 圓滿了~~~~~
(Tailwind還沒用過,只用過Bootstrap,先收藏起來~)

終於啊,你還有一半要熬哈哈

1
搋兔
iT邦新手 5 級 ‧ 2021-10-01 00:32:25

恭喜完賽!!!

然後,雞哥你太給力了!
我以後去找工作一定第一個報上你的名字!
/images/emoticon/emoticon39.gif

偷偷推廣一下

1
Calvin
iT邦新手 5 級 ‧ 2021-10-01 10:20:26

說好的後半段改寫golang教學呢?

那個下回再議

我要留言

立即登入留言